初步瞭解redux

　　redux作為react的狀態狀態管理工具，是十分重要的一部分，但是它在學習起來比較困難。它的寫法一共分為三部分，而且他不像其他的東西一樣可以寫一步，在頁面上查看一下。它必須三個部分全部完成之後，才能查看效果，所以redux在報錯的時候也是非常的頭痛的，不好查找具體是在哪一步寫錯了內容。

　　下麵簡單的說一個我對它的一些瞭解和使用，給大家提供一些參考

　　好的，使用redux最開始的一步就是安裝

　　npm i --save redux和npm i --save react-redux

　　安裝完成之後，我們去修改index.js文件的內容，先導入Provider

import {Provider} from 'react-redux'

　　下一步

 1 class Index extends React.Component{
 2     render() {
 3         return (
 4             <React.Fragment>
 5                 <Provider>
 6                     <App/>
 7                 </Provider>
 8             </React.Fragment>
 9         );
10     }
11 }
12 
13 ReactDOM.render(<Index />, document.getElementById('root'));

現在頁面正常是可以顯示出來的，但是在控制台內會有兩個報錯，這個我們先不用管

接下來回到我們的App.js頁面寫我們的內容，我們在頁面上定義兩個點擊按鈕，一個增值，一個減值

1 <div>計算器:{this.props.state.number}</div>
2 <button onClick={this.incCounter.bind(this)}>+</button>
3 <button onClick={this.decCounter.bind(this)}>-</button>

接下來定義一下點擊事件，並且把這個方法傳遞給index.js頁面的方法

 1 constructor(){
 2      super()
 3      this.iAmount = 0
 4 }
 5 //將值傳遞給src/index.js裡面的counter
 6 //增值
 7 incCounter(){
 8      this.props.dispatch({type:"INC",amount:++this.iAmount})
 9 }
10 //減值
11 decCounter(){
12     this.props.dispatch({type:"DEC",amount:--this.iAmount})
13 }

現在那我們返回到index.js  寫我們的方法

 1 function counter(state={number:0},action) {
 2     switch (action.type) {
 3         case "INC":
 4             return{number: action.amount}
 5         case "DEC":
 6             return{number: action.amount}
 7         default:
 8             return state
 9     }
10 }

現在我們的函數也定義完了，我們需要將它存放一下，我們在導入createStore和combineReducers

1 import {createStore，combineReducers} from 'redux'

然後

 1 let reducer=combineReducers(//合併多個函數
 2     {
 3         counter:counter,
 4     }
 5 )
 6 const store=createStore(reducer);
 7 class Index extends React.Component{
 8     render() {
 9        return (
10             <React.Fragment>
11                 <Provider store={store}>
12                     <App/>
13                 </Provider>
14             </React.Fragment>
15          );
16      }
17  }

好了現在我們基本差不多就要完成了，就剩下最後的一點現在我們返回到App.js導入一個connect以及變換一下導出組件的方法

1 import { connect } from 'react-redux';
2 
3 export default connect((state)=>{
4     return {
5         state: state
6     }
7 })(App);

到目前為止，我們的這個功能也完成了，

希望大家通過以上內容對redux有一個初步的瞭解，以上內容有什麼不足或者錯誤的地方，歡迎大家提出。