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

Question

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

应用程序.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>
      )
}

名称.js

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

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

export default Name

商店.js

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

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

动作.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;
};

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

Answer 1

名称组件重新渲染的唯一方式是其 p​​rops 或状态更改，或者父组件重新渲染。在 redux 中进行更改不会自动执行此操作。为了查看状态的更改，您需要订阅这些更改。您可以自己执行此操作，但更好的解决方案是使用react-redux，它旨在将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>
  )
}

然后您将connect与您的 Name 组件一起使用：

import { connect } from 'react-redux';
function Name(props) {
  return (
    <div>           
      My name is: {props.name}
    </div>
  )
}

const mapStateToProps = (state) => {
  return { name: state };
}

export default connect(mapStateToProps)(Name)