redux的作用

redux流程.png

Redux 主要分為三個(gè)部分 Action磁椒、Reducer违寞、及 Store

action

• action用來傳遞操作 State 的信息,以 Javascript Plain Object 的形式存在哮缺，形如

{
  type: 'ADD_FILM',
  name: 'Mission: Impossible'
}

type 屬性是必要的淌友，用來表達(dá)處理 state 數(shù)據(jù)的方式游两，其他屬性任意太闺，建議簡(jiǎn)單

但為了方便組織跺讯，可以創(chuàng)建函數(shù)來生產(chǎn) action枢贿，即Action Creator

function addFilm(name) {
  return { type: 'ADD_FILM', name: name };
}

Reducer

• 處理action傳達(dá)需要操作的信息
• 通過傳入舊的 state 和指示操作的 action 來更新 state

Reducer 根據(jù)傳入的** action.type** 來匹配 case 進(jìn)行不同的 state 更新

function films(state = initialState, action) {
  switch (action.type) {
 
  case 'ADD_FILM':
    // 更新 state 中的 films 字段
    return [{
      id: state.films.reduce((maxId, film) => Math.max(film.id, maxId), -1) + 1,
      name: action.name
    }, ...state];
 
  case 'DELETE_FILM':
    return state.films.filter(film =>
        film.id !== action.id
    );
 
  case 'SHOW_ALL_FILM':
    return Object.assign({}, state, {
        visibilityFilter: action.filter
      });
 //不要修改 state。 使用 Object.assign() 新建了一個(gè)副本
  default:
    return state;
    //在 default 情況下返回舊的 state刀脏。遇到未知的 action 時(shí)局荚，一定要返回舊的 state。
  }

當(dāng) action.type變多時(shí)愈污，可以按照功能拆分耀态，在通過組合函數(shù)合并

function rootReducer(state = {}, action) {
  return {
    films: filmReducer(state.films, action),
    filter: filterReducer(state.filter, action)
  };
}
 // rootReducer 將不同部分的 state 傳給對(duì)應(yīng)的 reducer 處理，最終合并所有 reducer 的返回值暂雹，組成整個(gè)state首装。
 
 //使用Redux 提供的 combineReducers() 方法
import { combineReducers } from 'redux'

var rootReducer = combineReducers({
    films: filmReducer,
    filter: filterReducer
  });
  
 //combineReducers() 將調(diào)用一系列 reducer，并根據(jù)對(duì)應(yīng)的 key 來篩選出 state 中的一部分?jǐn)?shù)據(jù)給相應(yīng)的 reducer杭跪，這樣也意味著每一個(gè)小的 reducer 將只能處理 state 的一部分?jǐn)?shù)據(jù)

Store

• 銜接action和reducer

Store 是單一的,維護(hù)著一個(gè)全局的 State簿盅，并且根據(jù) Action 來進(jìn)行事件分發(fā)處理 State,Store 是一個(gè)把 Action 和 Reducer 結(jié)合起來的對(duì)象挥下。

生成store

import {createStore } from 'redux'

var store = createStore(rootReducer);

store 對(duì)象可以簡(jiǎn)單的理解為如下形式

function createStore(reducer, initialState) {
    //閉包私有變量 
    var currentReducer = reducer;
    var currentState = initialState;
    var listeners = [];
    function getState() {
      return currentState;
    }    
    function subscribe(listener) {
      listeners.push(listener);
      return function unsubscribe() {
        var index = listeners.indexOf(listener);
        listeners.splice(index, 1);
      };
    }
    function dispatch(action) {
        currentState = currentReducer(currentState, action);
        listeners.slice().forEach(listener => listener());
        return action;
    }
    //返回一個(gè)包含可訪問閉包變量的公有方法
    return {
      dispatch,
      subscribe,
      getState
    };
}

store.getState() 用來獲取 state 數(shù)據(jù)。
store.subscribe(listener) 用于注冊(cè)監(jiān)聽函數(shù)桨醋。每當(dāng) state 數(shù)據(jù)更新時(shí)棚瘟，將會(huì)觸發(fā)監(jiān)聽函數(shù)。
store.dispatch(action) 是用于將一個(gè) action 對(duì)象發(fā)送給 reducer 進(jìn)行處理

store.dispatch({
  type: 'ADD_FILM',
  name: 'Mission: Impossible'
}); 

connect

• Connect 組件主要為 React 組件提供 store 中的部分 state 數(shù)據(jù) 及 dispatch 方法

通過import { connect } from 'react-redux'將state的值和action綁定到組件的props上

import { connect } from 'react-redux'
import Counter from '../components/Counter' //一個(gè)組件
import * as CounterActions from '../actions/counter'

//將state.counter綁定到props的counter
// state 將由 store 提供
function mapStateToProps(state) {
  return {
    counter: state.counter
  }
}

//將action的所有方法綁定到props上
function mapDispatchToProps(dispatch) {
  return bindActionCreators(CounterActions, dispatch)
}

//通過react-redux提供的connect方法將我們需要的state中的數(shù)據(jù)和actions中的方法綁定到props上
export default connect(mapStateToProps, CounterActions)(Counter)

saga

import {
  takeEvery
} from 'redux-saga'
import {
  call,
  put,
  fork,
  take,
  cancel
} from 'redux-saga/effects'
import {
  GET_LOGINED_REQUEST,
  LOGIN_REQUEST
} from './login.js'
import {
  loginAPI,
  loginedAPI
} from '../../../api'

export function* watchRequestLogined() {
  yield takeEvery(GET_LOGINED_REQUEST, queryFlow)
}

export function* queryFlow(action) {
  const task = yield fork(logined)
  yield take(LOGIN_CANCEL)
  yield cancel(task)
}

export function* logined(){
  try {
    const response = yield call(loginedAPI)
    yield put({
      type: LOGIN_SUCCESS,
      response
    })
  } catch (error) {
    yield put({
      type: LOGIN_CANCEL,
      error
    })
  }
}

export function* watchRequestLogin() {
  yield takeEvery(LOGIN_REQUEST, loginFlow)
}

export function* authorize({account, password}){
  try {
    const response = yield call(loginAPI, {
      account,
      password
    })
    yield put({
      type: LOGIN_SUCCESS,
      response
    })
  } catch (error) {
    yield put({
      type: LOGIN_ERROR,
      error
    })
  }
}

export function* loginFlow(action) {
  const { account, password } = action.payload
  const task = yield fork(authorize, { account, password })
  yield take(LOGIN_CANCEL)
  yield cancel(task)
}