改变状态但不重新渲染 react redux

Posted 2023-02-22

【中文标题】改变状态但不重新渲染 react redux

【英文标题】：Changing state but not rerendering react redux

【发布时间】：2018-12-31 14:11:13

【问题描述】：

我一直在访问 store 来更改状态，我什至可以在控制台中看到更改，但是 ui 没有重新渲染。 Here 是我的代码的存储库（它非常小而且基本）。 为什么我的 ui 没有重新渲染？

https://github.com/shanemmay/test-3

【问题讨论】：

你能把你代码的相关部分贴在这里吗？

您必须将组件连接到商店，以便商店更改触发重新渲染。如果它们未连接，则它们不会在商店更改时重新渲染，因此不会反映新的商店值。

【参考方案1】：

在您的 index.js 中，您需要更改将 store 提供给 App 组件的方式。应该是这样的。

import Provider from 'react-redux'

ReactDOM.render( <Provider store=store>
<App />
</Provider>, document.getElementById('root'));

然后在您的 App.js 中，您需要将状态映射到道具，然后显示该道具的数字。最重要的是，您必须使用 connect 将您的 react 组件连接到 redux 存储。以下是您需要修改 App.js 的方法

 import React,  Component  from 'react';
 import connect from 'react-redux'


 class App extends Component 
   render() 
     return (
       <div>
         <h1>this.props.number</h1>
         <button onClick=
           () =>
           
             this.props.dispatch(type:'+');
           
         > + </button>
       </div>
     );
   
 

 const mapStateToProps = state => (
   number: state
 )

 export default connect(mapStateToProps)(App);

请务必通过https://redux.js.org/basics/usage-with-react 获得更好的了解。

【参考方案2】：

您的应用需要使用 madhu bhat 所说的提供者与 redux 框架连接。

你必须遵循 redux 架构，基本的了解会非常简单地解决这个问题。

基本流程

访问我的仓库中的同类示例

https://github.com/zural/react-redux-simple-counter/tree/master

这将使您了解 redux 流程和反应状态。