reactjs - dispatch 什么都不做

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)

这是动作，获取 todo 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)
    );

标签： reactjsredux

Answer 1

我看到你想访问target里面的财产state。所以，reducer 应该是这样的：

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

看看这是否有效。