redux簡單的使用過程及流程

二.redux的使用

1. redux使用過程

安裝redux：

npm install redux --save
或
yarn add redux

通過建立一個簡單的js檔案，先來簡單學習一下redux：

1.2.搭建專案結構

1.2.1 建立一個新的專案資料夾：learn-redux

執行初始化操作
yarn init

安裝redux
yarn add redux

1.2.2 建立src目錄，並且建立index.js檔案

1.2.3 修改package.json可以執行index.js

"scripts": {
  "start": "node src/index.js"
}

通過修改之後就不用使用node index.js執行，只需要yarn start

修改packages.json

1.3.開始在index.js中編寫程式碼

1.3.1.建立一個物件，作為我們要儲存的狀態：

const redux = require('redux');

const initialState = {
  counter: 0
}

1.3.2.建立Store來儲存這個state

• 建立store時必須建立reducer；
• 我們可以通過 store.getState 來獲取當前的state

// 建立reducer
const reducer = (state = initialState, action) => {
  return state;
}

// 根據reducer建立store
const store = redux.createStore(reducer);

console.log(store.getState());

1.3.3.通過action來修改state

• 通過dispatch來派發action；
• 通常action中都會有type屬性，也可以攜帶其他的資料；

store.dispatch({
  type: "INCREMENT"
})

store.dispath({
  type: "DECREMENT"
})

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})

1.3.4.修改reducer中的處理程式碼

• 這裡一定要記住，reducer是一個純函式，不需要直接修改state；

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

1.3.5 可以在派發action之前，監聽store的變化：

store.subscribe(() => {
  console.log(store.getState());
})

完成的案例程式碼如下：

const redux = require('redux');

const initialState = {
  counter: 0
}

// 建立reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

// 根據reducer建立store
const store = redux.createStore(reducer);

store.subscribe(() => {
  console.log(store.getState());
})

// 修改store中的state
store.dispatch({
  type: "INCREMENT"
})
// console.log(store.getState());

store.dispatch({
  type: "DECREMENT"
})
// console.log(store.getState());

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})
// console.log(store.getState());

2. redux結構劃分

如果我們將所有的邏輯程式碼寫到一起，那麼當redux變得複雜時程式碼就難以維護。
接下來，將會對程式碼進行拆分，將store、reducer、action、constants拆分成一個個檔案。

2.1注意：node中對ES6模組化的支援

從node v13.2.0開始，node才對ES6模組化提供了支援：

• node v13.2.0之前，需要進行如下操作：
  • 在package.json中新增屬性：“type”: “module”；
  • 在執行命令中新增如下選項：node --experimental-modules src/index.js;

node v13.2.0之後，只需要進行如下操作：

• 在package.json中新增屬性：“type”: “module”；

注意：匯入檔案時，需要跟上.js字尾名；

2.2對redux結構進行劃分

建立store/index.js檔案：

import redux from 'redux';
import reducer from './reducer.js';

const store = redux.createStore(reducer);

export default store;

建立store/reducer.js檔案：

import {
  ADD_NUMBER,
  SUB_NUMBER
} from './constants.js';

const initialState = {
  counter: 0
}

function reducer(state = initialState, action) {
  switch(action.type) {
    case ADD_NUMBER:
      return {...state, counter: state.counter + action.num};
    case SUB_NUMBER:
      return {...state, counter: state.counter - action.num};
    default:
      return state;
  } 
}

export default reducer;

建立store/actionCreators.js檔案：

import {
  ADD_NUMBER,
  SUB_NUMBER
} from './constants.js'

export const addAction = (num) => {
  return {
    type: "ADD_NUMBER",
    num
  }
}

const subAction = (count) => ({
  type: SUB_NUMBER,
  num: count
})

export {
  subAction
}

建立store/constants.js檔案：

export const ADD_NUMBER = "ADD_NUMBER";
const SUB_NUMBER = "SUB_NUMER";

export {
  SUB_NUMBER
}

3. Redux流程圖

我們已經知道了redux的基本使用過程，那麼我們就更加清晰來認識一下redux在實際開發中的流程：

1. 全域性通常只有一個Store，儲存我們的State；
2. Component中在某些情況會派發Action（這些Action是我們提前定義好的）；
3. Reducer會接收到這些Action，並且在Reducer中會返回一個新的State，作為Store的State；
4. State發生更新之後會觸發通知，告知訂閱者資料發生了改變；
5. 訂閱者拿到最新的資料（在props中），更新到jsx中，介面發生改變；
   

之後會講解有關redux在react中的使用