reactjs - 还原/ react 。实现后 combineReducers 无法获取应用程序的状态

Question

将两个 reducers 组合在一起(EditButton 和 TodoApp)后，我的应用程序每次开始崩溃。在此之前，当我只使用一个 reducer TodoApp 时，我对 reducers 没有任何问题。但是现在我无法弄清楚出了什么问题，因为每次我在下面的 component 的 map 函数中得到错误。错误“TypeError:无法读取未定义的属性'map'”。

那么，我忘记了什么？我也无法在 App 的嵌套组件或容器中获取状态。这也很奇怪，但是在 App 中我可以通过 console.log() 来做到这一点。

/* reducer */

import { combineReducers } from 'redux'
import { ADD_TODO, EDIT_TODO, DELETE_TODO, FILTER_TODO_UP, FILTER_TODO_DOWN } from '../Variables/Variables'

const initialState = {
    todos: []
}

function EditButton(state, action) {
    if (typeof state === 'undefined') {
        return 'Edit';
    }

    switch (action.type) {
        case EDIT_TODO:
            return state = "Edit" ? "Done" : "Edit"
        default:
            return state
    }
}

function TodoApp(state, action) {
    if (typeof state === 'undefined') {
        return initialState;
    }

    switch (action.type) {
        case ADD_TODO:
            return Object.assign({}, state, {
                todos: [
                    ...state.todos, 
                    {
                        id: action.id,
                        text: action.text,
                        done: action.done
                    }
                ]
            });
        case EDIT_TODO:
            return Object.assign({}, state, {
                todos: [
                    ...state.todos, 
                    {
                        id: action.id,
                        text: action.text,
                        done: action.done
                    }
                ]
            });
        case DELETE_TODO:
            return Object.assign({}, {
                todos: state.todos.filter(todos => todos.id !== parseInt(action.id))
            });
        case FILTER_TODO_UP:
            return Object.assign({}, {
                todos: [
                ...state.todos.sort((a, b) => b.id - a.id)
                ]
            });
        case FILTER_TODO_DOWN:
            return Object.assign({}, {
                todos: [
                    ...state.todos.sort((a, b) => a.id - b.id)
                ]
            });
        default: 
            return state;
    }
}



export default combineReducers({TodoApp, EditButton})

/* 应用程序 */

import React, { Fragment } from 'react';
import TodoFormAdd from '../Containers/TodoFormAdd';
import TodoListAdd from '../Containers/TodoListAdd';
import TodoFormFilterAdd from '../Containers/TodoFormFilterAdd';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <Fragment>
                // console.log(this.props.state.getState()) - work!
                <TodoFormAdd />
                <TodoListAdd store={this.props.store} />
                <TodoFormFilterAdd />
            </Fragment>
        );
    }
}

export default App;

/* 容器 */

import { connect } from 'react-redux';
import TodoList from '../Components/TodoList/TodoList';
import { DeleteTodo } from '../Actions/AddTodo'

// console.log(this.props.state.getState()) - does not work!

const mapStateToProps = state => ({
    todos: state.todos
});

const mapDispatchToProps = dispatch => ({
      todoFormDelete: todo => dispatch(DeleteTodo(todo))
});

export default connect(
    mapStateToProps, 
    mapDispatchToProps)(TodoList)

/* 组件 */

import React from 'react';
import TodoIteam from '../TodoIteam/TodoIteam'

class TodoList extends React.Component {
handleDelete = (e) => {
    let target = e.target;
    let closestDelete = target.closest('span');
    let closestEdit = target.closest('button');

    if (closestDelete) {
        let index = closestDelete.parentNode.getAttribute('index');
        this.props.todoFormDelete(index);
    } else { 
        return 
    }
}

render(props) {
// console.log(this.props.state.getState()) - does not work!

    return (
        <ul onClick={this.handleDelete}>{this.props.todos.map((iteam, index) => 
 // this where I get an error
                <TodoIteam key={index} index={iteam.id} {...iteam} />
            )}
        </ul>
    );
}
}

export default TodoList;

Answer 1

当您在 combineReducers 中使用 ES6 属性简写符号时:

combineReducers({TodoApp, EditButton})

这相当于写combineReducers({ TodoApp: TodoApp, EditButton: EditButton })

但是在您的 CONTAINER 中，您正在访问 state.todos 没有任何称为 todos 的内容来自 state 而不是它的 TodoApp ，因此您得到 <.map() 中的strong>错误:

this.props.todos.map((iteam, index) {} 

编辑:当你从你的 reducer 返回一个包含一个名为 todos 的数组的对象时，要访问正确的状态，你需要使用 reducer Name 后跟你要返回的数组名称，这将是 TodoApp.todos

所以在你的容器内你需要访问正确的 reducer

const mapStateToProps = state => ({
    todos: state.TodoApp.todos // Notice TodoApp is used instead of todos
});

您可以在 Redux Documentation 上阅读有关 combineReducers 的更多信息