react篇---redux的使用

一、基礎介紹

• 本文在React 零基礎入坑的基礎上介紹redux的使用。
• 如若對react不是很瞭解，能夠先行掌握react的基礎知識。
• react官方文檔

二、使用redux

• 安裝依賴

cnpm i -S redux react-redux redux-thunk  // redux-thunk => action異步處理
複製代碼

• 基礎模塊介紹，如圖所示，在src下新建store文件夾，新建state,actions,reducers,actionTypes,index

  

state  ==> 初始化state數據
actions ==> redux規定修改state數據必須經過dispatch對應的action
reducers ==> 描述應用如何更新state(能夠理解爲action觸發了state的修改方法，reducers是修改方法的具體內容)
actionTypes ==> action的類型，這裏新建actionTypes文件，只是方便統一管理
index ===> 導出建立的store
複製代碼

• state.js,初始化state數據

export default {
  userReducer: {
    login: false,
    test: 'test'
  },
  orderReducer: {
    orderType: 'order',
    completed: 'false',
    num: 0
  }
}
複製代碼

• actions.js，修改state的方法

import { USER_LOGIN, ADD_ORDER_NUM } from './actionTypes'
export function userLogin(payload) {
  return {
    type: USER_LOGIN,
    payload
  }
}
export function addOrderNum() {
  return {
    type: ADD_ORDER_NUM
  }
}
複製代碼

• actionTypes.js，對action的類型集中管理

export const USER_LOGIN = 'USER_LOGIN'
export const ADD_ORDER_NUM = 'ADD_ORDER_NUM'
複製代碼

• reducers.js，更新state具體描述

import { combineReducers } from 'redux'
import { USER_LOGIN, ADD_ORDER_NUM } from './actionTypes'

let userReducer = (state = false, action) => {
  switch (action.type) {
    case USER_LOGIN:
      return {
        ...state,
        login: action.payload
      }
    default:
      return state
  }
}

let orderReducer = (state = {}, action) => {
  switch (action.type) {
    case ADD_ORDER_NUM:
      return {
        ...state,
        num: ++state.num
      }
    default:
      return state
  }
}

export default combineReducers({ // combineReducers,合併多個reducers
  userReducer,
  orderReducer,
})
複製代碼

• index.js，暴露store

import { createStore, applyMiddleware } from 'redux'
import reducers from './reducers'
import initialState  from './state'
import thunk from "redux-thunk"  // thunk中間件，加強異步action
const enhancer = applyMiddleware(thunk)  // redux須要經過applyMiddleware來使用中間件
export default createStore( // createStore,建立store實例
  reducers,
  initialState,
  enhancer
)
複製代碼

三、在組件中使用

• 修改index.js入口文件，如圖所示，紅線部分是須要修改的部分。Provider,是一個高價組件，經過它把store共享給子組件。其主要原理就是利用react的context來向子組件共享數據。

  

• 在具體的組件中使用

import React, { Component } from 'react';
import PropsTypes from 'prop-types'  // PropsTypes定義數據的類型，cnpm i -S prop-types
import { connect } from 'react-redux' // connect顧名思義，鏈接組件，返回一個高階組件
import { addOrderNum } from '@/store/actions' // 引入須要使用的action

class OrderNum extends Component {
  static PropsTypes = { // 定義props的類型，isRequired表示參數是必須的
    orderType: PropsTypes.string,
    num: PropsTypes.number.isRequired,
    completed: PropsTypes.bool,
    addOrderNum: PropsTypes.func.isRequired
  }
  render() {
    return (
      <div className="order_component">
        <p>orderType: {this.props.orderType}</p>
        <p>orderNum: {this.props.num}</p>
        <p>completed: {this.props.completed}</p>
        <button onClick={this.props.addOrderNum}>add order number</button> 
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => ({ // mapStateToProps,將組件的props和state中的數據關聯起來
  orderType: state.orderReducer.orderType,
  completed: state.orderReducer.completed,
  num: state.orderReducer.num
})
const mapDispatchToProps = { // mapDispatchToProps， 將組件的事件和action關聯起來
  addOrderNum
}
export default connect(mapStateToProps, mapDispatchToProps)(OrderNum)  // connect接受mapStateToProps， mapDispatchToProps
複製代碼

四、總結

• 本文主要介紹了react-redux的使用
• 佈局徹底根據本身的喜愛，你也能夠不這麼作
• 如有不妥之處，歡迎指正。