Redux的理解和项目中的使用

偏执的太偏执、 2023-03-03 15:28 5阅读 0赞

# Redux的介绍 #

Redux是集中管理状态（数据）的，通过它可以实现跨组件通信，在任何组价中都可以拿到存储在里面的数据。

### Action ###

Action就是一个对象，它里面有个type属性，值是字符串，它是用来标识我们要执行的操作，除了type外，其他属性由自己定义。

### Reducer ###

Reducer就是一个函数，接受旧的state和action，返回新的state

（oldState，action）=> newState

### Store ###

Store将action，state，reducer联系在一起。

她的作用：

1.  维持应用的state
2.  提供getState（）方法获取state
3.  提供dispatch（action对象）方法更新state
4.  通过subscribe（listener）监视state的变化，重新渲染组件
5.  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70][]

# 在react项目中使用redux #

根据需求分析，我们需要在组件中拿到count，对这个数进行加减操作，那么这个值只有连个变化，加或者减

第一步：action对象确认 ｛type:’add’｝ \{type:’ decrease’\}

第二步：根据旧的state和action对象进行加工，产生newState

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //创建reducer &nbsp;function count(oldState=0, action){ &nbsp;&nbsp;let {type} = action &nbsp;&nbsp;//根据加或者减产生不同的newState &nbsp; switch(type){ case ‘add’: newState = oldState+1 return newState case ‘decrease: &nbsp; newState = oldState-1 &nbsp;&nbsp;return newState default: &nbsp; //初始化count &nbsp; return oldState } } 另一个reducer function xxx(){ &nbsp;return xxxxx } //多个reducer合并 import ｛combineReducers｝from ‘reudx’ export default combineReducers({ &nbsp;&nbsp; Count, &nbsp;&nbsp; xxx }) </td> 
 </tr> 
 </tbody> 
</table>

第三部：通过store建立联系

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //引入createStore，创建Store import ｛createStore｝ from ‘redux’ //根据reducer，创建store import reducer from ‘./reducer’ export default createStore(reducer) </td> 
 </tr> 
 </tbody> 
</table>

第四步：修改index.js文件

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //引入store emport store from ‘./redux/store.js’ //向App传入store ReactDom.render(&lt;App store = {store}/&gt;,document.getElemetById(‘root’)) //监视state变化 store.subscribe(()&nbsp;=&gt;&nbsp;{ &nbsp;&nbsp;ReactDom.render(&lt;App&nbsp;store={store}&nbsp;/&gt;,&nbsp;document.getElementById('root')); }) </td> 
 </tr> 
 </tbody> 
</table>

第五步：在组件中使用

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //App.js //引入action创造函数 import {add decrease } from ‘./redux/action.js’ const ｛store｝= this.props&nbsp;&nbsp; //获得store对象 store.dispatch( add() ) //传入action对象去修改state </td> 
 </tr> 
 </tbody> 
</table>

# 在react项目中使用react-redux #

第四步：修改index.js

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //引入react-redux import {Provider} from 'react-redux' ReactDom.render( &lt;Provider store={store}&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;App/&gt; &lt;/Provider&gt;, document.getElementById('root')); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

第五步：组件中使用react-redux

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //引入action创造函数 import {add ，decrease } from ‘./redux/action.js’ //引入connect，创建容器组件&nbsp;&nbsp; import {connect} from ‘react-redux’ &nbsp; class Counter extends Component{ &nbsp;//获取state中的数据 this.props.count //触发reducer this.props.add() } &nbsp; //connect调用 export default connect( //第一个参数 &nbsp; state =&gt; ({ count:state.count, xxxx:state.xxx }) //第二个参数 ｛add，decrease｝ )（Counter） </td> 
 </tr> 
 </tbody> 
</table>

# 在react项目中使用redux-thunk实现异步action #

第一步：创建异步action

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> export add = ()=&gt;({type:’add’}) export decrease= ()=&gt;({type:’ decrease’}) &nbsp; //异步action export addAsync = ()=&gt;{ &nbsp;return (dispatch)=&gt;{ &nbsp;&nbsp; setTimeout(()=&gt;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;dispatch(add()) }) } } </td> 
 </tr> 
 </tbody> 
</table>

第三步：通过store建立联系

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //引入createStore，创建Store import ｛createStore，applyMiddleware｝ from ‘redux’ //根据reducer，创建store import reducer from ‘./reducer’ //引入redux-thunk，处理异步action import thunk from ‘redux-from’ export default createStore(reducer, applyMiddleware(thunk)) </td> 
 </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70]: /images/20230208/b55d25135dca404ba31097eb8494c2d2.png