1、數據流,react-redux是什麼?爲何使用react-redux?
數據流是什麼?
行爲與響應的抽象react
爲何使用數據流?
幫助咱們明確瞭解行爲與對應的響應redux
react與數據流的關係?
react是純V框架,須要數據流支撐框架
爲何使用redux?
官方綁定的單項數據流Flux比較重ide
redux比較簡單,單一狀態樹函數
很是小,壓縮後大概只有2Kspa
單項數據流?
傳統MVC Model和View能夠互相影響,致使數據混亂code
單數據流store 向view傳輸,操做View更新,在有用戶發出新的指令分發到Displatcher上對象
2、React-Redux的用法
action – 行爲的抽象
須要一個固定的type,且惟一
是一個js對象,通常由方法生成get
const addTodo = (text)=>{ renturn { type:'ADD_TODO', id:nextTodoId ++, text } }
reducer – 是響應的抽象
是純方法
返回新狀態
返回一個新對象,不修改當前state
state 當前的stage
根據傳入action的type決定怎麼作it
const todos = (state=[],action) => { switch(action.type){ case ADD_TODO : return [ ...state,{ text:action.text, completed:false } ] case COMPLETE_TODO : let arr = []; state.map((item,i)=>{ if (i == action.index) { item.completed = !item.completed }; arr.push(item) }) return arr default : return state } }
store – 是state和reducer的混合體、全部數據和狀態的存儲
action 作用於 store
reducer 根據 store響應
state 可預測
store是惟一的
由 createStore 方法生成
import {createStore} from 'redux'; import rootReducer from './reducer/index'; const store = createStore(rootReducer);
Provider – 讓容器組件拿到state
let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
combineReducers – 合併多個Reducer
須要特別注意,使用combineReducers來合併reducer,須要子reducer的名字跟對應要接收的state的key一致
import { combineReducers } from 'redux'; const chatReducer = combineReducers({ chatLog, statusMessage, userName }) export default todoApp;
若是不一樣名,就要採用下面的寫法。
const reducer = combineReducers({ a: doSomethingWithA, b: processB, c: c }) // 等同於 function reducer(state = {}, action) { return { a: doSomethingWithA(state.a, action), b: processB(state.b, action), c: c(state.c, action) } }
connent – 用於從 UI 組件生成容器組件
mapStateToProps 負責輸入邏輯,即將state映射到 UI 組件的參數(props)
負責輸出邏輯,即將用戶對 UI 組件的操做映射成 Action。
TodoList UI組件
const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList)
mapStateToProps() – 把狀態綁定到組件的屬性當中。
第二個參數,表明容器組件的props對象 這個是一個傳遞給 全部屬性的對象。
const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } }
mapDispatchToProps() – 用來創建 UI 組件的參數到store.dispatch方法的映射
是一個函數,會獲得dispatch和ownProps(容器組件的props對象)兩個參數
const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter: filter }; }
dispatch – 是 View 發出 Action 的惟一方法。
function mapDispatchToProps(dispatch){ return { changeName(name){ dispatch({ type:'ADD_NAME', name }) } } }