Reactjs React redux如何在更新存储时更新组件道具

我认为一旦商店更新，所有相关的组件道具也会更新，但是道具（视图）不会更新。我不知道如何获得更新的数据

这是我的测试代码

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;

（减根剂）

userAction.js

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

    return {
        type: UPDATE_USER,
        user,
    }
}

App.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

类应用程序扩展组件{
componentDidMount（）{
this.state=this.state | | store.getState（）；
console.log（this.state.user）；
}
render（）{
返回(
{this.user
？注销
：登入
}
找不到页面。}/>
);
}
}
导出默认应用程序

Login.js

类登录扩展组件{ 建造师（道具）{ 超级（道具）； console.log（this.props.user）；//输出：null }

postLogin=（）=>{
让email=$（'input[name=“email”]）.val（）；
让password=$（'input[name=“password”]”）。val（）；
此.props.dispatchLogin（电子邮件、密码）；
console.log（this.props.user）；//输出：null
//this.props.history.push（'/'）；
};
render（）{
返回(
电邮：
密码：
登录<
/按钮>
);
}
}
常量mapStateToProps=（状态）=>({
用户：state.user
});
const mapDispatchToProps={
dispatchLogin：（电子邮件，密码）=>登录（电子邮件，密码），
};
导出默认连接（mapStateToProps、mapDispatchToProps）（登录）；

---

商店变更时道具不会自动更新？如果是，如何获取更新后的值？登录后，我重定向到root（App.js）页面，但视图仍然没有更新。

我根据您的代码创建了一个repo，您可以克隆它以查看工作示例

您的主要问题在于

应用程序
组件：

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

您不应该直接从组件分配或修改
状态
，而应该使用
设置状态
（如果不使用react-redux），或
调度
（如果使用react-redux）（这是一篇关于原因的好文章）

由于您使用的是react-redux，因此希望通过组件的
道具
获取状态数据。您可以使用react-redux的
connect（）
方法将您的状态映射到props（MapStateTops）——就像您已经在使用登录组件一样

另外，使用react router重定向的惯用方法是使用
{
const email=$（'input[name=“email”]”）。val（）
const password=$（'input[name=“password”]”）。val（）
this.props.dispatchLogin（电子邮件、密码）
};
渲染（）{
if（this.props.user）{
返回
}
返回(
...

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

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