原生react和react-redux的初使用；

第一步： 首先是安裝redux 再安裝react-redux;

 yarn add redux  react-redux 

第二步： 建立store檔案並註冊store;

   import { createStore } from 'redux';

// counter為一個reducer純函式;裡面有兩個形參 第一個是當前的state, 
//第二個是當前的action  可以解構 有type、payload;
    會返回一個新的state作為當前的state, 進行替換
   const counter = (state, action)
 
 => {
      switch (action.type) {
             case 'name':
                return {}
            default:
                return state;
        }
    }
    const initState = { name:"zlc"} ,第二引數為初始值的state;
    let store = createStore(counter, initState);  最終生成store;

通過建立的store有4個API；

• store發生改變時觸發這個函式：
  

  store.subscribe(() =>
  console.log(store.getState(), ‘subscribe’)
  )；

• 獲取store中當前的狀態：
  store.getState()；

• 修改store內部的狀態{type:“class”,payload:“需要傳遞的值”}：
  store.dispatch({type:"" , payload:""})；

• 修改更新store裡的reducer;
  store.replaceReducer(nextReducer) //替換更新當前的reducer

第三步： 由於redux和react-redux 的負責模組不一樣，redux可以跨平臺多複用

此時要用react-redux進行react元件關聯，採用元件屬性值的方式獲取;

1. redux負責全域性 store資料管理;
2. react-redux 負責react元件和redux進行關聯繫結; 如果沒有react-redux,在更新後store裡的值後，react檢視並不改變;

    import { Provider ,connect  } from 'react-redux'
     //最好是根元件進行包裹
     <Provider store={store}>
        <App/> 你的元件
     </Provider> 
     
     //某個需要關聯的react元件 
    const HeaderContent = (props) => {
       return <div className={cls.headerTitle}>
          <div className={cls.item}>
              go back
          </div>
          <div className={cls.center}>
              {props.component}
          </div>
          <div className={cls.item}>
              user:{props.userName}
          </div>
      </div>
     }
     //進行元件的關聯 使用引入進來的connect()()	
      export default connect(state => {
          return { component: state.component, userName: state.userName }
      })(HeaderContent)

1. <Provider> 它是整個redux應用的頂層元件  <Provider store={store}> 進行關聯redux 中的store;
2.  connect((state)=>{ return { 元件屬性名：state底下之後的屬性值    } })(要關聯的元件)
在dispatch觸發某個type而更改reducer內部返回的state值時，可以影響受關聯元件的屬性更新;