redux 與 react-redux 的結合使用

上篇文章我們聊到在react中如何簡單的使用redux，那麼今天我們就來看一下在“幹活的時候”我們是怎樣運用redux的。

1. 相信很多小夥伴不難看出當我們單獨去使用redux的時候雖然有章可循,是在所有使用到的組件中我們都要去導入store,那麼有沒有什麼方法可以不這樣做呢？答案是有的。
2. 我們可以依靠react的context去自己寫一個Provider將其包裹在外層文件中,那麼被包裹的所有組件在使用store裏面的狀態的時候都可以訪問到而且不用每次都導入store。
3. 當然在現在社會中凡事都講究效率,很多我們以前需要自己動手去寫的東西現在都有現成的插件來代替,而且不得不說啊,一些插件的效率還是相當高的。例如react-redux就幫助我們完成了上述我們所要做的工作。
4. 那具體怎樣使用呢,我將在下面進行演示。

先使用命令行工具安裝redux和react-redux

1. npm install redux react-redux --save
2. 還是先創建倉庫store:

import {createStore} from 'redux'
import rootReducer from "../reducer";   // 後續創建
export default function configStore() {
  const store = createStore(rootReducer);
    return store;
}

3. 這裏還以計數器的爲例我們先創建一個放置常量的文件夾:

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

4. action:

import * as countActions from '常量文件路徑'
export default {  
       increment(){
	     return{
		type:'countActions.INCREMENT'
	    }
	}，  
      decrement(){
            return{
               type:'countActions.INCREMENT'
     }
            }
}

5. reducer:

import * as countActions from '常量文件路徑'
const initialState = {count:0}
export default function counter(state=initialState,action){ 
      switch(action.type){
	case countActions.INCREMENT:
	  return {...state,count:state.count+1}
	case countActions.DECREMENT:
	  return {...state,count:state.count-1}
	default:
	  return state
	 }
}

6. 如果你知道redux的基本使用以上所寫相信你已經很熟悉了，接下來來看在項目中我們如何合併reducer:

import { combineReducers } from "redux";     // 合併的方法
import counter from "./counter";    // 一個reducer
const rootReducer = combineReducers({  counter}); // 多個reducer直接逗號接着寫
export default rootReducer;

7. 接下來就是react-redux登場的時候了我們到入口文件中:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";  // 引入插件給你寫好的Provider
import configstore from "./store/index"; // 我們先前自己寫的store

const store = configstore();

ReactDOM.render(
  <Provider store={store}><App /></Provider>, // 使用標籤形式包裹並將store以屬性傳遞
  document.getElementById("root")
);

8. 做完這些工作你可以打開控制檯看是否有報錯，如果沒有那麼恭喜我們可以到需要獲取狀態的組件中去了:

import React, { Component } from "react";
import { connect } from "react-redux";  // 通過導入使用connect進行連接
import countActions from '路徑'  // 我們的action

class DemoOne extends Component {
  render() {
      let { counter, increment,decrement } = this.props; //結構出來狀態和方法
          return (
                <div>
                <button onClick={() => increment()}>inc</button>
                 {counter.count}
                <button onClick={() => decrement()}>dec</button>
                </div>
                 );
           }
 }
  export default connect(state => state, countActions)(DemoOne); // connect是一個高階組件所以採用這種寫法

9. 到此我們就使用react-redux和redux而且進行了模塊化的分割實現了一個簡單的功能。

很多人說啊，這並沒有比先前單獨使用redux方便到哪去。這個是對的，其實從代碼量來看確實是，可是在我們組件化開發項目的時候，數據往往很多很多，那時候纔會體現出這種集成合並模塊化的使用好處，不僅方便維護管理而且比較清晰易懂。

redux比較適合中大型的項目，如果是小項目加上它那麼多的模板代碼顯得則過於累贅，所以啊，大家不要執着於redux這一條路,比如我們的Mobx、官方Hook提供的useReducer和很多第三方的諸如stook 、Unstated等都可以更方便的提供類似功能，所以大家要放開眼光，多嘗試新的東西，可能會更好。

那麼redux和react-redux的使用就說到這裏，後續爲大家帶來redux中處理異步問題的中間件使用，謝謝~ ~

———Counter War Class