通过redux改变状态后如何更新React组件？

我正在学习 React 和 Redux，在学习的同时，我决定制作一个带有按钮的网页，单击该按钮就会改变状态。在按钮下方，我想在不同的组件中显示当前状态。虽然单击按钮会更改状态，但它不会反映在组件中。这是我的代码：

App.js

import React from 'react'
import Name from './Name'
import {changeName} from './Action'; 

export default function App () {  
      return (
          <div>
            <button onClick={changeName}>Click me</button>
            <Name />
          </div>
      )
}

Name.js

import React from 'react'
import {store} from './Store'

function Name(props) {
    return (
        <div>           
            My name is: {store.getState()}
        </div>
    )
}

export default Name

Store.js

import { createStore } from 'redux';
import {reducer} from './Reducer';

export const store = createStore(reducer, 'Tarun');

Action.js

import {store} from './Store';

export const changeName = () => {
    if (store.getState() === "Tarun"){
        store.dispatch({ type: 'name', payload: 'Subhash' });
    }
    else{
        store.dispatch({ type: 'name', payload: 'Tarun' });
    }
}

减速器.js

export const reducer = function(state, action) {
    if (action.type === 'name') {
      return action.payload;
    }
    return state;
};

当我单击按钮时，名称组件内的文本不会更改。问题是什么？

您需要按照 Redux 文档正确设置您的减速器和初始存储。

你缺少一个Provider，这将为您提供store到您的应用程序。

const store = createStore(reducer, applyMiddleware(thunk));

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

现在，您的商店可供您的组件使用。

Your reducer也需要一个初始状态，并且您始终应该返回状态的更新副本。也就是说，不要直接更改状态，而是制作一个副本，更改它，然后返回该副本。

const initialState = {
  name: ""
};

const reducer = function(state = initialState, action) {
  if (action.type === "name") {
    return { ...state, name: action.payload };
  } else {
    return state;
  }
};

export default reducer;

您可能已经注意到，我在您的商店中添加了一个中间件，这是因为在您的操作中访问当前减速器的状态时通常需要这样做。也就是说，我为此安装了 redux-thunk，所以在你的操作中，你可以有这样的东西：

export const changeName = () => {
  return (dispatch, getState) => {
    if (getState().name === "Tarun") {
      dispatch({ type: "name", payload: "Subhash" });
    } else {
      dispatch({ type: "name", payload: "Tarun" });
    }
  };
};

现在，随着您的商店被提供给您的应用程序、您的减速器已完成且您的操作已准备就绪，您可以将不同的组件连接到您的减速器。

您使用高阶组件react-redux called connect为了那个原因。例如，在你的Name组件，我们可以通过将状态映射到组件的 props 来将要显示的名称连接到您的化简器：

function Name(props) {
  return <div>My name is: {props.name}</div>;
}

const mapStateToProps = state => {
  return {
    name: state.name
  };
};

export default connect(mapStateToProps)(Name);

这里的好处是您还可以将第一个参数保留在connect高阶组件为空，只传递第二个组件，这将是调度函数。好吧，这就是你在你的App组件，您可以将其连接到changeName action.

function App(props) {
  return (
    <div>
      <button onClick={props.changeName}>Click me</button>
      <Name />
    </div>
  );
}

const mapDispatchToProps = dispatch => {
  return {
    changeName: () => dispatch(changeName())
  };
};

export default connect(
  null,
  mapDispatchToProps
)(App);

现在，当应用程序发送一个changeName操作时，您的减速器状态将被更新，并且连接到减速器状态的其他组件将重新渲染。

摘要： 尝试将您的商店想象为一罐空糖果。你的罐子一开始是空的，但不同的操作可能会改变罐子里的东西。最重要的是，房子里的不同人知道罐子在哪里，就可以去拿一些糖果。转化为您的问题，您的应用程序以空名称开始，并且您有一个设置名称的操作。通过以下方式知道在哪里可以找到该名称的组件连接的您的减速器将知道该名称何时更改并获得更新的名称。

最终代码可以在这里找到：