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

Question

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

Answer 1

在您的 index.js 中，您需要更改向 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 以获得更好的理解。

Answer 2

您的应用需要像 madhu bhat 所说的那样使用提供程序与 redux framwork 连接。

你要遵循redux架构，基本了解就可以很简单的解决这个问题。

基本流程

Visit same kind of example in my respositary

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

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

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

Changing state but not rerendering react redux

state

store

reactjs

redux

react-redux