React-redux как обновить реквизиты компонента при обновлении магазина

Question

Я думал, что как только магазин обновится, все реквизиты соответствующих компонентов тоже будут обновлены, но реквизит (представление) не обновится. и я не знаю, как получить обновленные данные.

Вот мой тестовый код,

userReducer. js

const initialState = null;
const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case UPDATE_USER: {
            return Object.assign({}, action.user)
        }

        default:
            return state;
    }
};

export default userReducer;

(rootReducer)

export default combineReducers({
    user: userReducer,
});

userAction. js

export function login(email, password) {
    let user = {
        'email': email,
    };

    return {
        type: UPDATE_USER,
        user,
    }
}

Приложение. js

class App extends Component {
    componentDidMount() {
        this.state = this.state || store.getState();
        console.log(this.state.user);
    }

    render() {
        return (
            <Provider store={store}>
                <Router>
                    <div className="App container">
                        {this.user
                            ? <Link to="/logout">Logout</Link>
                            : <Link to="/login">Login</Link>
                        }
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/login" component={Login}/>
                            <Route render={() => <h2>Page not found.</h2>}/>
                        </Switch>
                    </div>
                </Router>
            </Provider>
        );
    }
}

export default App

Вход. js

Класс Вход расширяет Компонент {конструктор (реквизит) {супер (реквизит); console.log (this.props.user); // output: null}

postLogin = () => {
    let email = $('input[name="email"]').val();
    let password = $('input[name="password"]').val();

    this.props.dispatchLogin(email, password);

    console.log(this.props.user); // output: null

    // this.props.history.push('/');
};

render() {
    return (
        <div>
            <table>
                <tbody>
                <tr>
                    <th>email:</th>
                    <td><input type="text" name="email"/></td>
                </tr>
                <tr>
                    <th>password:</th>
                    <td><input type="password" name="password"/></td>
                </tr>
                </tbody>
            </table>
            <div>
                <button onClick={this.postLogin}>Login<

/button>
                </div>
            </div>
        );
    }
}

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

const mapDispatchToProps = {
    dispatchLogin: (email, password) => login(email, password),
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Реквизиты не обновляются автоматически при смене магазина? Если так, как я могу получить обновленное значение? После входа я перенаправляю на страницу root (приложение. js), но, тем не менее, представление не обновляется.

Answer 1

Я сделал репо на основе вашего кода, который вы можете клонировать, чтобы увидеть рабочий пример. https://github.com/cflynn07/sohelp-2020-04-27

Ваша основная проблема в компоненте App:

class App extends Component {
    componentDidMount() {
        this.state = this.state || store.getState();
        console.log(this.state.user);
    }

Вы никогда не должны назначать или изменять state непосредственно из компонента, вместо этого используйте setState (если не используете response-redux) или dispatch (если используете response-redux) (Вот хорошая статья о том, почему https://daveceddia.com/why-not-modify-react-state-directly/)

Так как вы ' При использовании response-redux вы хотите получить данные о состоянии через компонент props. Вы можете использовать connect() метод response-redux для сопоставления вашего состояния с реквизитами (mapStateToProps) - как вы уже делаете с вашим компонентом Login.

Кроме того, вместо вызова this.props.history.push('/') изнутри вашего * Метод 1023 *, идиоматический c способ перенаправления с реакции-маршрутизатором состоит в использовании компонента <Redirect. Я привел пример этого в src/components/Login.js из репозитория, указанного выше.

class Login extends Component {
  postLogin = () => {
    const email = $('input[name="email"]').val()
    const password = $('input[name="password"]').val()
    this.props.dispatchLogin(email, password)
  };

  render () {
    if (this.props.user) {
      return <Redirect to="/" />
    }
    return (
      <div>
        <table>
        ...