?一.第一步是介紹redux的工作流程邏輯解析圖：

二.第2步介紹下redux的應用如下圖所示：

首先通過Redux中的一個對象函數 createStore來創建一個store

創建上一步中的store的時候在?createStore函數中傳遞reducer的函數來改變state的狀態

創建一個action,這個action是個對象主要包含type和payload。這個type主要是reducer函數更新state狀態的一個處理類型，根據類型分類對state內的狀態進行相應的更新處理

上面的步驟都操作完了之后，只需要通過store下面的dispatch的派發action，通過派發action后，redux會觸發相應的reducer來更新相應的state狀態

最后通過store.subscribe(()=>{})來訂閱，意思差不多就是監聽state的狀態的更新，主要是通過store.getState()的方法來獲取state更新后的狀態

三. 第三步是讓redux和react-redux在項目中簡單應用的例子

?第一步創建一個rootReducer.js文件如上圖所示

第二步如下圖，將這個rootReducer.js引入如果文件index.js，并且將它作為入參傳入createStore中創建一個store；（createStore是來自于redux，在上面介紹redux中都有介紹）

然后創建一個store是通過如下方式：

import { createStore?} from 'redux';?

const store = createStore(rootReducer.js)

接下來我們需要從react-redux中引入provider；

import { Provider?} from 'react-redux';

然后我們需要將Provider形式將store注入到組件中來實現組件和store的通信，如下代碼

<Provider store={store}><App /></Provider>

最后綜合注入的代碼截圖如下：

四.第四步是如何在組件中如何連接store中的state狀態和修改state狀態；

首先我們需要將react-redux 中的 connect 引入至組件中,connect的作用是將store結合組件返回個新的高階組件

import { connect } from 'react-redux';

const mapStateToProps = (state) =>{return {posts: state.posts} }?export default connect(mapStateToProps)(組件的名稱)

這樣組件中就可以直接將state中的狀態posts注入到props中，如此組件中就可以通過

this.props.posts直接用state中posts數據了，綜合如下圖所示：

?五.第五步就是如何子組件中更新state中的數據狀態，如下圖中的mapDispatchToProps

const??mapDispatchToProps =?(dispatch) => {return {deletePost: dispatch({type: 'DELETE_POSTS',id: id})} }export default connect(mapStateToProps,mapDispatchToProps)(組件名稱)

如上圖所示通過mapDispatchToProps（接受一個參數就是dispatch---用來派發action），組件中可以通過事件觸發，在事件中調用上圖代碼中的deletePost函數來更新state中posts數據狀態，下圖就是如何調用deletePost這個方法來達到更新state中posts數據的狀態

比如組件中有個button按鈕，通過button按鈕的點擊事件來調用deletePost，如下圖所示：

<button onclick={this.handleClick.bind(this)}></button>handleClick() {this.deletepost(this.props.product_id) }

上述中說明了通過按鈕的點擊事件來觸發?mapDispatchToProps的deletePost事件來派發action，從而更新state中posts的數據。

這個只是我總結的部分學習react-redux和redux在項目中的應用，如有問題歡迎大佬們指點一二，謝謝

總結

以上是生活随笔為你收集整理的react结合redux的开发步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。