Я построил глобальный государственный редукционный шаблон с контекстом и хуками.Есть ли способ объединить редукторы? - PullRequest
Новая
       13

Я построил глобальный государственный редукционный шаблон с контекстом и хуками.Есть ли способ объединить редукторы?

1 голос
/ 08 марта 2019

Я создал глобальный контекст провайдера состояний и редуктор с помощью крюка useReducer. Я понимаю, что объединение нескольких редукторов, как в редуксе, проблематично. Есть ли хороший способ сделать это? Я видел людей, которые импортировали combReducers из сам редукса, и это, похоже, побеждает суть дела. У кого-нибудь есть понимание этого?

Ответы [ 2 ]

3 голосов
/ 09 марта 2019

Не уверен, что это то, что вы ищете, но я использовал что-то вроде ниже, чтобы объединить несколько редукторов. Это на самом деле уменьшает редукторы. На самом деле не похоже на приставку combineReducers с ключом / значением. 

const reduceReducers = (...reducers) => (prevState, value, ...args) =>
  reducers.reduce(
    (newState, reducer) => reducer(newState, value, ...args),
    prevState
  );

Я бы использовал как: 

function reducerA(state, action) {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

function reducerB(state, action) {
  switch (action.type) {
    case "double":
      return { ...state, count: state.count * 2 };
    case "halve":
      return { ...state, count: state.count / 2 };
    default:
      return state;
  }
}

export default reduceReducers(reducerA, reducerB);

Тогда Компонент: 

import reducers from "./reducers";

function Counter({ initialState = { count: 1 } }) {
  const [state, dispatch] = useReducer(reducers, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "double" })}>x2</button>
      <button onClick={() => dispatch({ type: "halve" })}>/2</button>
    </>
  );
}
0 голосов
/ 08 марта 2019

Из документов документирования,

По мере усложнения приложения вы захотите разделить свою функцию сокращения на отдельные функции, каждая из которых управляет независимыми частями состояния.

Таким образом, combineReducers - это вспомогательная функция, которая помогает объединять различные функции редуктора в один редуктор.Затем этот единственный редуктор можно использовать для инициализации объекта хранилища с помощью вспомогательной функции createStore.

Вот пример.Представьте, что у нас есть следующие два редуктора;
counterReducer внутри counterReducer.js файла: 

const counterReducer = (state={num:0},action)=>{

    switch (action.type){

        case "INCREMENT":
         return { num : state.num+1 }

        case "DECREMENT":
          return {num: state.num-1}

         default:
           return state
    }


}

export default counterReducer

и namesReducer внутри namesReducer.js файла. 

const namesReducer = (state = { allNames: [] }, action) => {
    switch (action.type) {

        case "ALLNAMES":
            return { allNames: state.allNames.concat(action.name) }

        default:
            return state
    }

}

export default namesReducer

Объединение этих двух редукторов с помощью помощника combineReducersФункция и использование полученного редуктора для инициализации объекта хранилища будет выглядеть следующим образом:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux'
import {Provider} from 'react-redux'
import counterReducer from './counterReducer';
import namesReducer from './namesReducer';

// combining two reducers into a single reducer
const reducer = combineReducers({
    counter: counterReducer,
    name: namesReducer
})


const store = createStore(reducer)

ReactDOM.render(<Provider store={store}><App /></Provider>,
 document.getElementById('root'))

Источники:
https://redux.js.org/api/combinereducers
https://reactgo.com/how-to-combine-reducers-redux

...