react-redux之入門篇

      react-redux是reactjs一個衍生插件，在簡單的一些應用中，采用state,props和context等就能解決。一旦在業務邏輯複雜時，系統複雜的情況，還是采用這三兄弟去開發，會使得代碼很複雜，臃腫，維護顯得捉襟見肘，很吃力。react-redux的出現顯得尤為必要，可以很好的系統業務邏輯和前端ui代碼給分割開，采用函數式程式設計,以便于維護，以一種比較輕便的橋梁的引入，使得代碼更具有維護性，在複雜的業務邏輯面前，也顯得輕便很多，當然這個東西具有一定複雜度，不易上手，需要配置的東西比較多，故對于這套東西，就得多練多看。

    react-redux是react js狀态管理工具，要想入門必須要先掌握的它的核心思想，它嚴格遵循了reactjs 的單向資料流的思維模式。

你首先得知道redux裡面到底有哪些東西：

1.state:這個家夥跟那個基礎三兄弟的中state是有差別的，在api中state是可以根據setState更改ui視圖的，dom資料的變化，都需要它來完成。在redux中的state是存放在store對象中的。要變化，得問action給不給變。取出：store.getstate();

2.action：對象（{}）；曰：“在我的體内有兩個屬性，一個type屬性，一個payload(不唯一)屬性，說白了你要type來驗證你是不是調用該方法，payload你需要表達什麼，通過payload傳達我想讓它消失這樣一個指令”；

2.reducer：方法（Function）；曰：‘在我的體内，你可以完成你要想完成的各種騷操作’；

代碼如下：

const counter=(state =0, action) =>{
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
           

3.store: 它幹的活就比較多，它屬于大頭，前面三個屬于準備工作，它就要開始處理；它做哪些事，如下（摘之官網）：

3.1  維持state應用；

3.2  提供 

getState()

 方法擷取 state；

3.3  通過 

subscribe(listener)

 注冊監聽器;

3.4 通過 

subscribe(listener)

 傳回的函數登出監聽器。

曰：‘我幹最累的活，幹最多的事，拿最少的工資，名利都那三個家夥給拿走啦，我不幹啦，老闆，我要加工資！！！嗚嗚嗚....’;

完整的一個步驟：

調用store.dispatch(action)

(我想要什麼，給我尋找) 

=> 

Redux store 調用傳入的 reducer 函數(找到了，兄弟，别急，我需要處理)

=> 根 reducer 應該把多個子 reducer 輸出合并成一個單一的 state 樹(所有的資料都歸并好，兄弟,等會兒，我将它放在state)

=> Redux store 儲存了根 reducer 傳回的完整 state 樹（兄弟，資料我已經放進state裡啦，記得取一下哈）

這是一個完整的readux資料流動模式，這個思維很重要；接下來我用代碼為你們分享一下，如何一步一步完成這些騷操作的；

第一步：action準備（action.js）:

function add(payload) {
    return { type: 'ADD', payload }
  }

  function min(payload){
      return{ type:'min',payload}
  }
  export {add,min}
           

第二步：reducer準備，我要開始邏輯啦（reducer.js,用了combineReducers這個方法處理）：

import { combineReducers } from 'redux'

const defaultState = 0;
const reducer = (state = 0, action) => {
  //console.log(action);
  switch (action.type) {
    case 'ADD':
      //return state.concat([action.text]);
      return state+action.text; 
    case 'min':
      return  state-action.text;
    default: 
      return state;
  }
};

export default combineReducers({
  //reducer:combineReducers({reducer}),
  reducer:combineReducers({reducer})
})
           

ps:運用combineReducers進行對象嵌套表達；

第三步：store準備，我要将那兩個家夥集中處理咯，沒有，你們啥也幹不成喲（store.js）：

import reducer from './reducer'
import { createStore,applyMiddleware  } from 'redux';
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
const loggerMiddleware = createLogger();
const configureStore = (preloadedState) => {
  return createStore(
   	reducer,
    preloadedState,
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    )
  )
}

export default configureStore();
           

ps:logger 插件列印日志，進行調試，可以根據自己的項目是不是需要引入；

這些工作都準備好了，我要将你們引入的我的 react應用中了，要做好心裡準備，别一下子懵咯喲，我可不負責的喲；

先要提供全局的store,故在app/index.jsx中

import {Provider} from 'react-redux';
import store from 'Component/tool/store'；




render() {//render函數；
  	  const history = createHistory()
      return(<Provider store={store}>
              <Router  history={history}>
                  <RouterIndex />
              </Router>
            </Provider>)
    //return(<React.Fragment><RouterIndex /></React.Fragment>)
  }
           

接下來我實作了喲：（login.jsx）

import {connect} from 'react-redux';
import {add,min} from 'Component/tool/action';


//中間就可以通過this.props.add(1)調用函數，和this.props.reducer擷取資料
...

const mapStateToProps = (state) =>({reducer: state.reducer.reducer, counter: state.counter})

const mapDispatchToProps = (dispatch) =>{
  return{
    add:payload=>{dispatch(add(payload))},
    min:payload=>{dispatch(min(payload))}
  }
   
}


export default connect(mapStateToProps,mapDispatchToProps)(Login);
           

這樣一個完整的redux配置完成，有木有被唬到，歡迎大家多多評論，互相交流，為我指出錯誤；

接下來一篇要為大家分享一個叫做redux-actions-----------《react-redux之提升redux-actions》

參考文檔：https://www.redux.org.cn/docs/basics/DataFlow.html；