React-redux store更新時如何更新組件props

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;

(根減速器)

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

class Login extends Component { constructor(props) { super(props); 控制台.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(App.js) 頁面，但仍然沒有更新視圖。

Answer 1

我根據您的代碼創建了一個 repo，您可以克隆它以查看一個工作示例。 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 （如果不使用 react-redux）或dispatch （如果使用 react-redux）（這是一篇關於為什么https://daveceddia.com/why-的好文章不直接修改反應狀態/ ）

由於您使用的是 react-redux，因此您希望通過組件的props獲取 state 數據。 您可以使用 react-redux 的connect()方法將 map 您的 state 用於道具（mapStateToProps）——就像您已經在使用 Login 組件一樣。

此外，使用 react-router 重定向的慣用方法是使用<Redirect組件，而不是從postLogin()方法中調用this.props.history.push('/') 。 我在上面鏈接的 repo 中的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>
        ...