Как разделить состояние между редукторами в редуксе (как организовать редукс)?

Question

Я учусь реагировать с избыточностью и не могу понять, как я могу использовать свойства состояния внутри редукторов. Я создал файл редукторов внутри /reducers папки

redursText. js

export const textReducer = (state = [], action) => {
 switch (action.type) {
     case 'ADD_TEXT':
         return state = action.payload;
     default:
         return state;
 }
}
export const addCustomMinusWordReducer = (state = [], action) => {
 switch (action.type) {
     case 'ADD_CUSTOM_MINUS_WORD':
         return state = action.payload;
     default:
         return state;
 }
}

и я создаю index. js внутри /reducers папка

import {textReducer, addCustomMinusWordReducer} from "./text"
import {combineReducers} from "redux"

const allReducers = combineReducers({
    text: textReducer,
    customMinusWords: addCustomMinusWordReducer
})

export default allReducers

Моя проблема в том, что я не могу получить доступ к состоянию text, которое создало в textReducer внутри addCustomMinusWordReducer. Я нашел связанную ссылку , но это не то, что я ищу. Как я могу использовать состояние в редукторах? Спасибо!

Answer 1

Из официальной документации redux здесь .

Многие пользователи позже хотят попытаться обмениваться данными между двумя редукторами, но обнаруживают, что combReducers не позволяет им делать это , Существует несколько подходов, которые можно использовать:

• Если редуктор должен знать данные из другого среза состояния, может потребоваться реорганизация формы дерева состояний, чтобы обрабатывать один редуктор больше данных.

• Возможно, вам придется написать некоторые пользовательские функции для обработки некоторых из этих действий. Это может потребовать замены combReducers на вашу собственную функцию редуктора верхнего уровня. Вы также можете использовать утилиту, такую ​​как Reduce-Redurs, для запуска функцииcellReducers для обработки большинства действий, а также для запуска более специализированного редуктора для определенных c действий, которые пересекают срезы состояний.

• Asyn c Создатели действий, такие как redux-thunk, имеют доступ ко всему состоянию через getState (). Создатель действия может извлечь дополнительные данные из состояния и поместить их в действие, чтобы каждый редуктор имел достаточно информации для обновления своего собственного среза состояния.

Итак, точно используя ваш подход без использования redux-thunk и без изменения порядка состояний с помощью родительских редукторов. Что вы можете сделать, это перейти в состояние от создателей действий.

Например; Один из создателей действий будет:

 const ExampleComponent = ({ text, clicked }) => {
    return (
       <button onClick={() => clicked(text)} />
    );
 };

 export default connect(state => ({ 
   text: state.text 
 }, dispatch => ({
   clicked: (textState) => dispatch({ type: 'ADD_CUSTOM_MINUS_WORD', textState })
 })(ExampleComponent);

И тогда в редукторе вы можете просто сделать:

export const addCustomMinusWordReducer = (state = [], action) => {
 // action.textState will contain the data from textState
 // do something with action.textState
 const { textState } = action;
}

Если вы действительно хотите использовать глобальное состояние внутри редукторов, как это легко можно сделать из документации Можно было бы использовать такую ​​утилиту, как Reduce-Redurs . Вместо использования combineReducers вы можете использовать reduceReducers. И в редукторе объект состояния будет содержать глобальное состояние, а не локальное состояние, которое мог бы дать CombineReducer.

PS:

Как и предполагалось в предыдущем ответе, изменение внутри редукторов плохой идеи, которая может привести к трудностям при исправлении ошибок в приложении.

, поэтому вместо state = state.payload лучшей идеей было бы использовать оператор распространения, такой как state = { ...state, ...state.payload }, который бы затем добавлял изменения в состояние, а не непосредственно устанавливал его.