初識 react-redux

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
            })
        }
    }
}
相關文章
相關標籤/搜索