react + redux：存储状态已更改，而视图未更改

Question

我尝试使用react-redux 。 按照教程中的说明使用connect 。 我有2个带有export default connect(...)(...) 。 在一个模块中调度时，dev-tools会显示变化中的状态和新状态，但另一个模块的视图不会更改。

App.js

const App = (props) => {
    return (
        <div>
            <UserForm />
            <FlexGrid>
                {props.testStore.persons.map((data, index) =>
                    <PersonCard data={data} key={index} /> // <!-- This not changed
                )}
            </FlexGrid>
        </div>
    );
}

export default connect(
    state => ({
        testStore: state
    }),
    dispatch => ({})
)(App);

UserForm.js

const UserForm = (props) => {
    let nameInput, familyInput, patronymicInput;

    const addUser = () => {
        props.addUser({
            name: nameInput.value,
            family: familyInput.value,
            patronymic: patronymicInput.value
        });
    }

    return (...);
}

export default connect(
    state => ({
        testStore: state
    }),
    dispatch => ({
        addUser: (data) => {
            dispatch({ type: 'ADD_USER', data});
        }
    })
)(UserForm);

如何解决？

Answer 1

您正在简化reducer中的状态。 您需要像这样保持状态不变

function storeChangeHandler(state = stateInit, change) { 
  if (change.type === 'ADD_USER') {
    return{
       ...state,
       persons: [...state.persons, change.data]
    };
  } 
  return state;
}