Reactjs 嵌套的Redux Reducer返回空的主状态

我已经准备好了待办事项。我正在为嵌套对象使用“”库。下面您可以找到ADD_TODO reducer和选择器，但当我调用ADD_TODO reducer时；它使国家变成这样

{
  0: null,
  1: null,
}

添加Todo减速器

import { makeSelectTodos } from 'containers/HomePage/selectors';

const initialState = fromJS({
  todos: [],
  visibilityFilter: 'SHOW_ALL',
});

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false,
      };
    default:
      return state;
  }
};

function homeReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        makeSelectTodos(),
        todo(undefined, action),
      ];
    default:
      return state;
  }
}

Selector.js

import { createSelector } from 'reselect';

const selectHome = (state) => state.get('home');

const makeSelectTodos = () => createSelector(
  selectHome,
  (homeState) => homeState.get('todos')
);

export {
  selectHome,
  makeSelectTodos,
};

---

看起来您想返回homeReducer中动作类型为“ADD_TODO”的所有TODO。不太对。具有TODO列表的组件必须考虑到这一点，它可以通过selectAllTodos选择器获取所有TODO

您也没有为

makeSelectTodos

函数提供状态。正如我看到的选择器返回函数一样，它返回createSelector函数。这是个错误。你需要这样写：

const selectHome = state => state.get('home');
const selectAllTodos = createSelector(
    selectHome,
    homeState => homeState.get('todos')
);

活动中的创建者选择器可通过以下方式使用：

// action creators:

const addTodoAction = todo => ({
    type: 'ADD_TODO',
    payload: todo
});

const addTodo = todo => (dispatch, getState) => {
    // here you able to use your selectors like:
    // const todos = selectAllTodos(getState());

    return dispatch(addTodoAction(todo));
};

尽可能简化减速器逻辑：

const todosReducer = (state = [], action) => {
    if (action.type === 'ADD_TODO') {
        return {
            id: action.payload.id,
            text: action.payload.text,
            completed: false
        };
    }

    return state;
};

const visibilityFilterReducer = (state = 'SHOW_ALL', action) => {
    // your visibility filter reducer logic
};

export default combineReducers({
    todos: todosReducer,
    visibilityFilter: visibilityFilterReducer
});

---

祝你好运！：）

问题出现在mapStateToProps，因为没有使用immutable，所以我得到了不同的数据结构。通过使用不可变的“getIn”，我找到了解决方案。

您在初始状态（

fromJS

）中使用不可变JS，但在还原器中返回纯JS（

return{…}

，

return[…]

）所以你不会在你的状态中找到

.get

方法，因为在

ADD_TODO

操作之后，你的状态不再是不可变的。谢谢。我不熟悉redux的不可变性，是的，我忘记了fromJs。现在我可以寻找正确的解决方案。返回嵌套reducer的不可变数据。offtop可能：为什么在reducer中使用选择器？如果您需要获取一些额外的数据以减少您的状态，您可以通过action creators负载传递这些数据。通过调用getState（）函数，您可以访问存储：

constsomeaction=params=>（dispatch，getState）=>{constsomeextradata=someExtraDataSelector（getState（））；返回dispatch（{type:'SOME_ACTION'，payload:{…params，…someExtraData}）；}