react redux 學習

安裝

npm install redux

核心概念

redux將整個應用的state存儲到一個store中，當用戶觸發一個action的時候，經過調用store.dispatch(action)來觸發sotre中定義好的 reducers 最終更新引用的state。

1. store 用來存儲整個應用的 state
2. state 一個用來描述應用狀態的對象
3. action 一個對象，用來描述程序發生的動做
4. reducer 是更改state的純函數接受 state 和action參數最後返回新的state

下面我會對每一個概念進行介紹

三大原則

1. 單一的數據來源，整個應用程序的狀態存儲在單個store 中
2. state 對象是隻讀的，改變state 的惟一方式是發出一個action
3. 如何經過action改變state，經過編寫春函數reducer 來實現

Actions

action是將數據發送的store的有效負載，他們是store數據的惟一來源經過 store.dispatch()將數據發送的store

action 是一個普通的js對象，action必須指定一個 type 屬性用來描述執行的操做。

{
  type: 'ADD_TODO',
  text: 'Build my first Redux app'
}
複製代碼

Action Creators

action creators 是返回一個action 的方法，這樣寫能夠方便開發和測試。

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

dispatch(addTodo('eat'))
複製代碼

Reducers

Reducers是指定狀態樹如何響應 dispatch 到store 的action的，action只是用來描述發生的動做，不描述狀態的變化。

首先肯定state的數據的格式

{
  todos: [
    {
      text: 'Consider using Redux',
      completed: true
    }
  ]
}

複製代碼

肯定state的數據格式以後咱們就能夠編寫一個reducer,reducer 是一個純函數接收state和action返回新的state

const initialState = {
  todos: []
}

function todoApp(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}
複製代碼

注意咱們使用Object.assign()返回一個新的狀態，不改變參數中的state 的值

分割 Reducers

當咱們應用程序的action比較多每一個action在reducers中的邏輯比較複雜的時候，若是還像咱們上面一直使用 switch case 能夠想象咱們的reducers會變的很是的長，此時咱們就須要對一些複雜的操做進行分割，分割的規則是根據 state 的節點操做進行分割，針對每一個節點的操做寫一個reducers而後使用 combineReducers 方法進行合併。

例如

import { combineReducers } from 'redux'
import {
  ADD_TODO,
  TOGGLE_TODO,
  SET_VISIBILITY_FILTER,
  VisibilityFilters
} from './actions'
const { SHOW_ALL } = VisibilityFilters

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

const todoApp = combineReducers({
  visibilityFilter,
  todos
})

export default todoApp
複製代碼

Store

在redux 應用程序中只能有一個store，使用store能夠將上面的reducers和actions進行組合，而後進行操做。

建立一個store

redux提供了一個createStore接收一個reducers參數，最終返回一個store，咱們將以前定義好的reducers引入，而後傳入createStore 就能夠了。

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)
複製代碼

store 提供的方法

1. getState() 獲取store中的狀態樹
2. dispatch(action) 發送action 更新action
3. subscribe(listener) 訂閱監聽返回一個unsubscribe函數用來取消訂閱

react-redux

安裝

npm install --save react-redux
複製代碼

Provider

<provider /> 是redux提供的一個組件，這個組件 有一個props store (上面文檔中建立出來的store) , 這個組件可使，使用connect()函數嵌套的組件能訪問redux中的store。

用法

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
複製代碼

connect

connect函數用於把redux 的store 和react 的組件鏈接到一塊兒，他返回的是一個包裝函數，這個函數的參數是一個react的組件，這個函數將會返回一個 包裝組件。

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

例子

import { addTodo } from './actionCreators'

const mapDispatchToProps = {
  addTodo
}
const mapStateToProps = (state, ownProps) => ({
  todo: state.todos[ownProps.id]
})
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoApp)
複製代碼

mapStateToProps?: (state, ownProps?) => Object

state爲redux的狀態樹，ownProps是連接組件的props

若是此方法有一個參數，在redux的state發生變化的時候會調用函數，若是此方法有兩個參數，此方法將會在鏈接組件的props或者redux的state發生變化的時候調用。

此方法返回一個對象，** 此對象（一般稱爲stateProps）將合併爲鏈接組件的props **。若是定義mergeProps，它將做爲mergeProps的第一個參數提供。

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

dispatch 即 store中的dispatch 經過傳入一個action給變store中的state數據

ownProps 即 連接組件的 props

您的mapDispatchToProps函數應返回一個對象。對象的每一個字段都應該是一個函數，調用哪一個函數能夠dispatch 一個action 到store。

mapDispatchToProps函數的返回被視爲dispatchProps。它將做爲props合併到您鏈接的組件。若是定義mergeProps，它將做爲mergeProps的第二個參數提供。

mergeProps?: (stateProps, dispatchProps, ownProps) => Object

若是指定，則定義如何肯定本身的包裝組件的最終props。若是您不提供mergeProps，則默認狀況下，您的包裝組件會收到{... ownProps，... stateProps，... dispatchProps}。

mergeProps的返回值稱爲mergedProps，字段將用做包裝組件的props。

options?: Object

暫未使用

參閱文檔