Redux Поток данных с React-хуками - PullRequest
Новая
       38

Redux Поток данных с React-хуками

0 голосов
/ 28 июня 2019

enter image description here

Я создаю веб-приложение.

Я пытаюсь использовать react-hooks.

и я почти закончил.

но я чувствовал, что мой избыточный поток - это что-то странное , как на картинке выше.

Мне просто интересно, что я делаю правильно.

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')} />
    </>
  );
}

Ответы [ 2 ]

1 голос
/ 28 июня 2019

Если ваш код следует этому типу шаблона редукса, то он должен быть сплошным.

Это будет идеальный путь: 

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

Кажется также совместимым с этим потоком:

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

enter image description here

0 голосов
/ 28 июня 2019

FC ListView здесь является функциональным компонентом, и вы можете использовать здесь ловушки для управления псевдо-состоянием, импортируя useState из пакета реагирования.

  1. Экспорт FC ListView с помощью connect () ();
  2. Импортировать useState из реагирования;

  3. Обновлять состояние с помощью этого хука.

    import {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 для управления переменными состояния в вашем функциональном компоненте.

...