dispatch 什么都不做答案

【问题标题】：dispatch not doing anythingdispatch 什么都不做
【发布时间】：2018-08-13 10:52:11
【问题描述】：

动作调度不起作用，功能起作用，我得到了 console.log 但商店没有改变。有什么想法吗？

import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import RemoveTodo from './RemoveTodo';
import { remove } from '../actions/Todo';
import { store } from '../app';


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

onDelete = ({id}) => {
    store.dispatch(remove({id}))
    console.log(store.getState());
};
render () {
    return (
<ul>
{this.props.target.map(({todo, significance, id}) => {
    return (
        <li
         key={id}>{todo} - impact is {significance}
         <button onClick={this.onDelete}>Remove</button>
         </li>
      );
    })}
</ul>


</div>
    );
}

};

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

export default connect(mapStateToProps)(TodosSummary)

这是动作，获取 todo id

export const remove = ({id}) => ({
type: 'REMOVE_TODO',
id
});

这就是reducer，过滤状态并带回过滤后的数组

const todosReducer  = (state = todosReducerDefaultState, action) => {
switch(action.type) {
    case 'ADD_TODO':
    return [
        ...state,
        action.target
    ];
    case 'REMOVE_TODO':
    return (
        state.filter(({ id }) => id !== action.id)
    );

【问题讨论】：

你为什么不通过mapDispatchToProps返回的方法进行调度？看起来您喜欢从某处导入 store 并在您的组件中访问它。你应该不那样做。简单示例请参考此链接：learn.co/lessons/map-dispatch-to-props-readme

标签： reactjs redux

【解决方案1】：

我看到你想访问state 中的target 属性。所以，reducer 应该是这样的：

case 'ADD_TODO':
    return {
        ...state,
        target: [...state.target, action.target]
    };
case 'REMOVE_TODO':
    return {
        ...state,
        target: state.target.filter(({ id }) => id !== action.id)
    };

看看这是否有效。

【讨论】：

获取指向 ... 状态点（第一个）的语法错误。不太清楚为什么

【解决方案2】：

像这样返回更新状态。

 case 'REMOVE_TODO':
    return [...state.filter(({ id }) => id !== action.id)];

【讨论】：

完全相同的结果。获取控制台..状态不会改变

【解决方案3】：

不建议直接更改状态，请将addToDo改为以下。

Object.assign({}, state, {
    todoList: state.target
});

您能否按照您的代码“todosReducerDefaultState”提供默认状态的代码 sn-p？

【讨论】：

const todosReducerDefaultState = [ ] ;