Redux入門

1. 介紹

redux是js的狀態管理機制，與vuex類似，不過vuex是為vue定制的。而redux并非僅僅服務于react,在jquery,angular,甚至于原生的js中都可以使用。簡單來說，redux就是幫我們管理數據的。

2. 核心概念

• state
  狀態，用于維護數據的一個對象，不能直接修改

  let initialState ={person: [] }

• reducer
  action調用后會執行響應的reducer，reducer會執行響應操作返回數據狀態 state

  const reducer = function(state=initialState,action){switch(action.type){case ADD_TO_PERSON :// 在reducer中不能直接修改state, 需要做的事值需要修改personreturn {...state,person:[...state.person,action.payload]}default :return state;} } const store = createStore(reducer);

• action
  定義動作，獲取參數，進而影響reducer的執行來改變或獲取state

  function addToPerson(name,age){return {type:ADD_TO_PERSON,payload:{name,age}} } // 分發動作 store.dispatch(addToPerson('tom',18))

3. 完整案例

下面的代碼我們通過create-react-app來創建項目，然后將下面的代碼插入到index.js中執行，當然如果我們在實際開發中肯定不會這么用，需要將寫在特定地方，然后進行引用。

... /* redux開始 */ //1. state數據初始狀態 let initialState ={person: [] } const ADD_TO_PERSON = 'ADD_TO_PERSON'//2. reducer,指定了應用狀態的變化如何響應 actions 并發送到store的。 const reducer = function(state=initialState,action){switch(action.type){case ADD_TO_PERSON :// 在reducer中不能直接修改state, 需要做的事值需要修改personreturn {...state,person:[...state.person,action.payload]}default :return state;} } const store = createStore(reducer);//3. action創建函數,添加 function addToPerson(name,age){// action對象，action是將數據從應用傳到store的有效載荷，是store數據的唯一來源，通過store.dispatch來調用return {type:ADD_TO_PERSON,payload:{name,age}} } console.log('-----',store.getState()); //4. 調用action完成person的保存 store.dispatch(addToPerson('tom',18)) console.log('-----',store.getState());/* redux結束 */ ...

4. 代碼整理

在具體代碼實施的時會遇到大量的數據，數據多了就需要模塊化來進行管理。目錄結構如下

• actions

該文件夾中定義項目中所有的動作

// index.js import personAction from './personAction'export {personAction }//personAction.jsimport {ADD_TO_PERSON} from '../const'export default {// action創建函數,添加addToPerson: function(name,age){// action對象，action是將數據從應用傳到store的有效載荷，是store數據的唯一來源，通過store.dispatch來調用return {type:ADD_TO_PERSON,payload:{name,age}}} }

• reducers

該文件夾中定義項目中所有的reducers

// index.js import { combineReducers } from 'redux'; import personReducer from './personReducer'export default combineReducers({personReducer });//personReducer.js import {personInitialState} from '../state/index.js' import {ADD_TO_PERSON} from '../const' // reducer,指定了應用狀態的變化如何響應 actions 并發送到store的。 const personReducer = function(state=personInitialState,action){switch(action.type){case ADD_TO_PERSON :// 在reducer中不能直接修改state, 需要做的事值需要修改personreturn {...state,person:[...state.person,action.payload]}default :return state;} }export default personReducer;

• state

該文件夾中定義項目中所有的狀態

// index.js import personInitialState from './personState'export {personInitialState }//personState.js export default {person: [] }

• const.js

該文件中定義項目中所有的常量

const ADD_TO_PERSON = 'ADD_TO_PERSON'export {ADD_TO_PERSON }

• index.js

import {createStore} from 'redux'; import Reducer from './reducers'const store = createStore(Reducer);export default store;

• src/index.js

// 導入react react-dom import React from 'react'; import ReactDOM from 'react-dom'; import store from './store' import {personAction} from './store/actions' // 導入全局css import './index.css'; // 導入根組件 import App from './App'; /* redux開始 */console.log(store.getState().personReducer); store.dispatch(personAction.addToPerson('tom',12)) console.log(store.getState().personReducer);/* redux結束 */// 在root元素上渲染根組件 ReactDOM.render(<App />, document.getElementById('root'));

效果如下

總結

以上是生活随笔為你收集整理的React入门-9.redux你好的全部內容，希望文章能夠幫你解決所遇到的問題。

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