react + redux：商店状态改变而视图改变

Question

我尝试使用react-redux。在教程中使用 connect。我有 2 个模块 export default connect(...)(...)。在一个模块中调度时，开发工具显示变化和新状态，但另一个模块的视图没有改变。

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

react + redux：商店状态改变而视图改变

react+redux: state of store changed without view changing

javascript

connect

reactjs

redux

react-redux