使用 React-hooks 的 Redux 数据流

Question

我正在构建 Web 应用程序。

我正在尝试使用 react-hooks。

我快完成了。

但是，我觉得我的 redux-flow 像上图一样很奇怪

我只是想知道我做得对不对。

MyStore.js

import {handleActions} from 'redux-actions';
import produce from 'immer';

export const INPUT_DATA = 'INPUT_DATA';

const initialState = {
  id: '',
  name: '',
  email: '',
  address: '',
  gender: '',
};

export default handleActions({
  [INPUT_DATA]: (state, action) => {
    return produce(state, draft=>{
      draft = {...state, ...action.payload};
    });
  },
  ...
},initialState);

FormA.jsx

import React from 'react';
import {useDispatch} from 'react-redux';

const FormA = () => {
  const dispatch = useDispatch();
  const [data, setData] = React.useState({id:'',name:'',email:''});
  React.useEffect(()=>{
    dispatch({type: INPUT_DATA, payload: data });
  },[data]);
  function handleChange(e,name){
    setData({...data, [name]:e.target.value});
  }

  return (
    <>
      <input type="text" value={data.id} onChange={(e)=>handleChange(e,'id')} />
      <input type="text" value={data.name} onChange={(e)=>handleChange(e,'name')} />
      <input type="text" value={data.email} onChange={(e)=>handleChange(e,'email')} />
    </>
  );
}

FormB.jsx

import React from 'react';
import {useDispatch} from 'react-redux';

const FormB = () => {
  const dispatch = useDispatch();
  const [data, setData] = React.useState({address:'',gender:''});
  React.useEffect(()=>{
    dispatch({type: INPUT_DATA, payload: data });
  },[data]);
  function handleChange(e,name){
    setData({...data, [name]:e.target.value});
  }

  return (
    <>
      <input type="text" value={data.address} onChange={(e)=>handleChange(e,'address')} />
      <input type="text" value={data.gender} onChange={(e)=>handleChange(e,'gender')} />
    </>
  );
}

Answer 1

如果您的代码遵循那种 redux 模式，那么它应该是可靠的。

这将是理想的路径：

Component -> action -> middleware -> API -> reducer -> props -> Component

似乎也符合这个流程：

https://cdn-images-1.medium.com/max/1600/*1QERgzuzphdQz4e0fNs1CFQ.gif

Answer 2

FC ListView 在这里似乎是功能组件，你可以在这里使用钩子通过从反应包中导入 useState 来管理伪状态。

使用 connect()() 导出 FC ListView;
从反应中导入 useState；
使用这个钩子更新状态。

从'react'导入{useState}；

const ListingTable = (props) => {

let [name, updateName] = useState('John Doe');
return (
    <div>
        <p>{name}</p>
        <button onClick={_ => updateName('Alex')}> Change Name</button>
    </div>
);};

您可以在此处使用 useState 作为 setState 来管理功能组件中的状态变量。

使用 React-hooks 的 Redux 数据流

Redux Data Flow with React-hooks

reactjs

redux

react-hooks