Javascript 如何在通过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>
      )
}

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

Reducer.js

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

---

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

您的名称组件重新播放的唯一方式是其道具或状态更改，或者如果父组件重新播放。在redux中进行更改不会自动执行此操作。为了查看状态的更改，您需要订阅这些更改。您可以自己做这件事，但更好的解决方案是使用react，它是为将react组件连接到redux商店而设计的

例如，您可以向应用程序添加提供商：

import { Provider } from 'react-redux';
import { store } from './Store'

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

---

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

您缺少一个

提供程序

，它将为您的应用程序提供

存储

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

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

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

您可能已经注意到，我在您的应用商店中添加了一个中间件，这是因为在您的操作中访问当前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

中名为

connect

的高阶组件。例如，在您的

Name

组件中，我们可以通过将您的状态映射到组件的道具，将要显示的名称连接到减速器：

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

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

export default connect(mapStateToProps)(Name);

现在，当应用程序分派一个

changeName

操作时，您的减速器状态将被更新，连接到减速器状态的其他组件将重新呈现

小结：试着把你的商店想象成一个空的糖果罐。您的jar开始是空的，但是不同的操作可能会改变jar中的内容。除此之外，房子里知道罐子在哪里的不同的人可以去买一些糖果。转换到您的问题，您的应用程序以空名称开始，您有一个设置名称的操作。通过连接到减速器而知道在何处查找该名称的组件将知道该名称何时更改，并将获得更新的名称

最终代码可在此处找到：

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

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

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

const initialState = {
  name: ""
};

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

export default reducer;

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

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

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

export default connect(mapStateToProps)(Name);

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