此兩篇redux專為甜豆所寫，不論是否會關注或看到，希望你開心

redux的hook使用

hook版本的使用，能極簡化程式碼操作，條理清晰。

在上一節中講到老版的redux如何使用。實話實說挺麻煩的，我們再來複習一下

1、老版使用redux

• 在需要使用redux的最大元件進行 引入與包裝

  import {Provider} from 'react-redux'
  import store from './store' 			//此為store
  
  import App from './app';					//此為元件
  
  render(
    <Provider store={store}>
      <App/>
    </Provider>,
    document.getElementById('root')
  );
   
  

• 在自組建入口配置中介軟體/mapStateToProps/mapDispatchToProps

  import {connect} from 'react-redux'
  import App from './App.js'
  
  const mapStateToProps = (state, ownProps) => {
    return {
      ...ownProps,
      ...state
    }
  }
  
  const mapDispatchToProps = (dispatch, ownProps) => {
    return {
      increase: who=>dispatch({type:"increase",who}),
      decrease: who=>dispatch({type:"decrease",who})
    }
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(App)
   
  

• store的建立檔案

  //不需要非同步請求【不要中介軟體】
  //store.js
  import {createStore} from 'redux'
  import reducer from './reducer'
  
  export default createStore(reducer)
  
  =============================================
  //需要非同步請求【要中介軟體】
  //store.js
  import {createStore,applyMiddleware} from 'redux'
  import thunk from 'redux-thunk'
  import reducers from './reducers'
  
  export default createStore(reducers,applyMiddleware(thunk))
   
  

• reducer的檔案建立

  const init = {
    num:1,
    who:'0',
    ui:true
  }
  export default function(state = init,action){
    switch(action.type){
      case 'increase':
        const {num,who} = state
        return {...state,num:num + 1,who:who+1}
      case 'decrease':
        return {...state,num:state.num - 1}
      case 'toggle' :
        return {...state,ui:!state.ui}
      default:
        return state
    }
  }
  

• 子元件中呼叫action 【已放入mapDispatchToProps中，直接呼叫props中的方法即可】

  import React from 'react';
  
  const App = (props) => {
    return (
      <>
        {props.num}
        <button onClick={()=>props.increase('1')}>2222</button>
        {props.who}
      </>
    );
  }
  
  export default App;
  

2、來看看hook版本

• 子元件中呼叫action

  • useSelector替代mapStateToProps
  • useDispatch替代mapDispatchToProps

  因為能useDispatch獲得dispatch方法，那就能夠實現非同步!!!!!!!!!!! 實際上可以封裝一個專門做非同步的方法避免多次重複import

  • 應當將方法 寫成action 封裝到actions中，此處為展示方便

  import React from "react";
  import { useSelector, useDispatch } from "react-redux";
  
  const Toggle = () => {
    const go = useSelector(state => state.go);
    const dispatch = useDispatch();
    const asyncfunc = () =>{
      setTimeout(()=>{
        dispatch({ type: 'toggle' })
      },1000)
    }
    return (
      <div>
        <div>{JSON.stringify(go)}</div>
        <input
          type="checkbox"
          value={go}
          onChange={() => asyncfunc()}
        />
      </div>
    );
  };
  
  export default Toggle;
  

• store的建立檔案 【無需在使用中介軟體，因為非同步呼叫已解決 只需建立store即可】

  //store.js
  import {createStore} from 'redux'
  import reducer from './reducer'
  
  export default createStore(reducer)
  

• 在需要使用redux的最大元件進行 引入與包裝 【不變】

  import {Provider} from 'react-redux'
  import store from './store' 			//此為store
  
  import Toggle from './toggle';		//此為元件
  
  render(
    <Provider store={store}>
      <Toggle/>
    </Provider>,
    document.getElementById('root')
  );
  

3、總結

• 去掉 - 子元件入口 【即書寫中介軟體層】
• 增加 + 子元件的引入{ useSelector, useDispatch }
• 減少 - ./store.js建立時巢狀中介軟體