Question

动作分派不起作用，该功能起作用，我得到了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)

这是动作，带有待办事项ID

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

那是化简器，过滤状态并带回过滤后的数组

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)
    );

Answer 1

我看到您想访问target中的state属性。所以，减速器应该是这样的：

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

看看是否可行。

Answer 2

这样返回更新状态。

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

Answer 3

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

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

能否根据您的代码“ todosReducerDefaultState”提供默认状态的代码段？

调度什么都不做

3 个答案: