簡介

• Redux 是一個有用的架構
• Redux 的適用場景：多交互、多數據源

工作流程圖

action

用戶請求

//發出一個action import { createStore } from 'redux'; const store = createStore(fn);//其中的type屬性是必須的，表示 Action 的名稱。其他屬性可以自由設置 const action = {type: 'ADD_TODO',data: 'Learn Redux' };store.dispatch(action);

Reducer

狀態機
Reducer 是一個函數，它接受 Action 和當前 State 作為參數，返回一個新的 State。
Reducer 是純函數，就可以保證同樣的State，必定得到同樣的 View。但也正因為這一點，Reducer 函數里面不能改變 State，必須返回一個全新的對象

const defaultState = 0; const reducer = (state = defaultState, action) => {switch (action.type) {case 'ADD':return {...state,data: action.data}default: return state;} };

Recucer的拆分

//index import {combineReducers} from 'redux'; import proIndex from './proIndex'; import product from './product' export default combineReducers({proIndex,product, });//product import actions from '../action/index' import {getDocMenu} from "../action/user/product";const {GET_PRODUCT_DOCUMENT_SUCCESS } = actions;export default (state = {},action) =>{switch (action.type) {case GET_PRODUCT_DOCUMENT_SUCCESS:return{...state,getDocMenu: action.data,}default:return state;} }//proIndex import actions from '../action/index';const {GET_SERVICE_CLASSIFICATION_SUCCESS,GET_SERVICE_SUBJECT_SUCCESS, } = actions;export default (state = {},action) => {switch (action.type) {case GET_SERVICE_CLASSIFICATION_SUCCESS:return {...state,getServiceClass: action.data,};case GET_SERVICE_SUBJECT_SUCCESS:return {...state,getServiceSubject: action.data,};default:return state;} };

store

數據倉庫

import { createStore } from 'redux' import todoApp from './reducers' //創建store倉庫 const store = createStore(todoApp) //createStore方法還可以接受第二個參數()，表示 State 的最初狀態。這通常是服務器給出的(window.STATE_FROM_SERVER就是整個應用的狀態初始值) const store = createStore(todoApp, window.STATE_FROM_SERVER)//引入action import {addTodo,toggleTodo,setVisibilityFilter,VisibilityFilters } from './actions'//打印當前狀態 console.log(store.getState())// 訂閱state變化 // subscribe()方法返回一個函數用于取消監聽 const unsubscribe = store.subscribe(() => console.log(store.getState()))// 發出一些action store.dispatch(addTodo('Learn about actions')) store.dispatch(addTodo('Learn about reducers')) store.dispatch(addTodo('Learn about store')) store.dispatch(toggleTodo(0)) store.dispatch(toggleTodo(1)) store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))//取消監聽狀態更新 unsubscribe()

配置中間件

import { createStore } from 'redux' import reducer from '../reducer/index' import thunk from 'redux-thunk' import promise from 'redux-promise' import logger from 'redux-logger'const store = createStore(reducer,applyMiddleware(thunk, promise, logger) );

redux-thunk

store.dispatch()只能傳入一個action對象，redux-thunk中間件則將其擴展為一個方法

//配置 import { createStore } from 'redux' import reducer from '../reducer/index' import thunk from 'redux-thunk'const store = createStore(reducer,applyMiddleware(thunk) );//使用 export function getDocMenu(query='') {return async(dispatch) => {try {const data = (await axios(`${baseUrl}doc.do?${Qs.stringify(query)}`)).data;//這里的dispatch相當于store.dispatchdispatch({type: GET_PRODUCT_DOCUMENT_SUCCESS,data: data})}catch(error){dispatch({type: GET_PRODUCT_DOCUMENT_FAILURE,error: new Error('獲取文檔菜單失敗')})}} }

redux-saga

解決異步的另一種方法

//配置 import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga'import reducer from './reducers' import mySaga from './sagas'// create the saga middleware const sagaMiddleware = createSagaMiddleware() // mount it on the Store const store = createStore(reducer,applyMiddleware(sagaMiddleware) )// then run the saga sagaMiddleware.run(mySaga)//使用 // action creators export function GET_USERS(users) {return { type: RECEIVE_USERS, data } }export function GET_ERROR(error) {return { type: FETCH_USERS_ERROR, data } }export function Begin_GET_POSTS() {return { type: BEGIN_GET_POSTS } }//saga.js import { takeEvery } from 'redux-saga'; import { call, put } from 'redux-saga/effects'; import axios from 'axios'; import { BEGIN_GET_POSTS, GET_POSTS, GET_POSTS_ERROR } from '../reducers';// worker saga function* showPostsAsync(action) {try {const response = yield call(axios.get, 'https://jsonplaceholder.typicode.com/posts');yield put({type: GET_POSTS,data: response.data});} catch(e) {yield put({type: GET_ERROR,error: new Error('some error')});} }// wacther saga function* watchGetPosts() {yield takeEvery(BEGIN_GET_POSTS, showPostsAsync); }// root saga export default function* rootSaga() {yield watchGetPosts() } //user.jscomponentWillMount() {this.props.dispatch(Begin_GET_POSTS()); }

轉載于:https://www.cnblogs.com/Lazy-Cat/p/11406304.html

總結

以上是生活随笔為你收集整理的Redux概览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。