簡單用redux實(shí)現(xiàn)功能如下：
點(diǎn)擊左側(cè)導(dǎo)航欄的時候，右側(cè)的header頭部相應(yīng)的顯示出左側(cè)的導(dǎo)航欄

WeChat180022874829b3dddf43c62f6d7f750e.png

首先在實(shí)現(xiàn)功能之前，需要簡單的了解rudux的流程和幾個常見的方法

流程圖如下：

屏幕快照 2019-05-07 下午5.26.39.png

之前聽到一個大佬講這個的時候把這個流程比喻成借書環(huán)節(jié)

reactComponent相當(dāng)于一個借書的人，ActionCreators相當(dāng)于借書這個動作，Store相當(dāng)于一個圖書管理員，Reducers相當(dāng)于查閱書記的小本本，好的，下面串起來流程，有一個人想要來借書，他首先說一句我要借書傳達(dá)給圖書管理員，要借很多本，圖書管理員需要查看小本本看書籍分別都在那一列哪一行，然后查閱之后在反饋給借書的人。OK流程走完，只要腦子中一直存在這個流程的話，寫起來代碼會輕松很多

常用方法如下：

store.getState()          //獲取store中的狀態(tài)
store.dispatch(action)    //將action傳給store
store.subscribe()         //store將狀態(tài)傳給組件

既然是初級版本的，代碼就應(yīng)該簡單易懂，按照這個流程走的話，最重要的部分應(yīng)該是store，所以npm install redux 安裝之后，新建在redux文件夾中，然后在文件夾中創(chuàng)建一個store.js的文件（由于圖書管理員離不開小本本，所以，reducer是作為它的參數(shù)）

store.js

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
  reducer,
);
export default store;

其次再創(chuàng)建一個reducer.js(reducer有兩個默認(rèn)的參數(shù)一個是狀態(tài)state，另一個是動作action)，一般都給state一個初始值，這樣，reducer.js文件就完成了?

reducer.js

const defaultState = {
  titleValue: '首頁',
}
//reducer 可以接受state但是不可以修改state 只有store才能改變
export default (state = defaultState, action)=> {
  console.log('action',action);
return state;
}

好的，下面正式從組件中走一遍流程

動作的發(fā)出者是左邊導(dǎo)航組件nav.js
所以在nav.js中代碼如下

 //在Menu中有一個點(diǎn)擊事件，所以代碼寫在這個方法中
    handleClick =({item,key})=> {
        const action = {
            type: 'action_title',
            title: item.props.title
        }
        store.dispatch(action)
        this.setState({
            currentKey:key  
        })
    }
render(){
return(
<Menu  
    mode="vertical" 
    theme="dark"
    selectedKeys={[this.state.currentKey]}
    onClick={this.handleClick}  //點(diǎn)擊事件
   >
   {this.state.menuTreeNode}
 </Menu>
 )
}

下面我來解釋上面的思路：
在看翻到上面看redux的流程圖，組件第一步是有一個動作action，即（上面說的借書動作）所以：

第一步是創(chuàng)建一個action，因?yàn)橛趾芏鄠€action，所以要定義一個type區(qū)分，title是要在header頂部展示的菜單名稱，item.props.title是我項(xiàng)目中獲取到的菜單名稱，賦值給title

第二步就是傳給store，所以用store.dispatch(action)方法傳給store更新狀態(tài)

const action = {
         type: 'action_title',
         title: item.props.title
  }
store.dispatch(action)

由于store狀態(tài)改變在reducer中是同步的，我剛才在reducer.js中寫了一個console.log('action',action);方法，當(dāng)點(diǎn)擊的時候，控制臺中會打印變化的action
如下：

屏幕快照 2019-05-09 下午3.40.57.png

這個時候在返回到上面看流程圖，reducer接受到狀態(tài)的改變之后需要傳給新的狀態(tài)給store，所以reducer.js文件需要處理一下數(shù)據(jù)了

reducer.js

const defaultState = {
  titleValue: '首頁',
}
//reducer 可以接受state但是不可以修改state 只有store才能改變
export default (state = defaultState, action)=> {
  console.log('action',action);
  if(action.type === 'action_title'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.titleValue = action.title   //這個時候store中的參數(shù)被重新賦值了
    return newState
  }
  return state;
}

由于reducer.js不能直接處理state，所以需要定義新的變量來改變參數(shù)值

好的，進(jìn)行到這一步驟狀態(tài)改變了怎么傳給組件呢？
下面在返回到流程圖中看下一步驟，這個時候reducer已經(jīng)將新的狀態(tài)傳給store，下一步驟就是store將這個狀態(tài)返回給組件(即圖書管理員給借書人說書在哪里)
這個時候就用到了store.subscribe() 這個方法了
顯示層是右邊的header組件，所以header.js中代碼如下：

header.js

//store文件需要import引入
 constructor(props){
        super(props)
        this.state = {
            title:store.getState().titleValue
        }
        store.subscribe(this.handleStoreChange)
      }
    handleStoreChange =()=> {
          this.setState({
            title:store.getState().titleValue  //將store中的值賦給title
          })
      }

store.subscribe()寫在 constructor中，同步store的狀態(tài)

ok辣，這樣redux的初級版就完成了！