前端數(shù)據(jù)流之Redux篇（知識點(diǎn)）

redux中文文檔

適用場景

UI層簡單，沒有什么互動的，不需要redux

使用方式復(fù)雜，與服務(wù)器大量交互，視圖層要從多個(gè)來源獲取數(shù)據(jù)的，使用redux
比如說：

  • 組件狀態(tài)要功響
  • 一個(gè)組件更改全局狀態(tài)
  • 一個(gè)組件需要改變另一個(gè)組件的狀態(tài)

設(shè)計(jì)思想

web應(yīng)用是個(gè)狀態(tài)機(jī)，視圖與狀態(tài)一一對應(yīng)。
所有的狀態(tài)，保存在一個(gè)對象里。

基本使用

npm i -g create-react-app安裝包
create-react-app redux-api創(chuàng)建項(xiàng)目
npm i redux安裝redux

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'

// 1.定義reducer
// state：容器的初始狀態(tài)
// action：修改state的行為類型
//        type - 行為類型； payload（可選的）其他數(shù)據(jù)
function Reducer(state = 0, action) {
  const {type} = action
  if (type === 'INCREMENT') {
    return state + 1
  } else if (type === 'DECREMENT') {
    return state - 1
  } else {
    return state
  }
}
// 2.創(chuàng)建store
const store = createStore(Reducer, 110)
// 3.獲取狀態(tài)
console.log(store.getState())
// 4.更新狀態(tài)
// store.dispatch({type:行 為類型，額外參數(shù)})
// 發(fā)起dispatch就是在調(diào)用reducer，dispatch接收的參數(shù)叫action
setTimeout(() => {
  store.dispatch({
    type: 'INCREMENT'
  })
}, 1000);
// 5.檢測狀態(tài)變化，驅(qū)動視圖更新
store.subscribe(() => {
  console.log(store.getState())
  render()
})

const Counter = (props) => {
  return <div>
    <h1>{props.value}</h1>
    <button>Increment</button>
    <button>Decrement</button>
  </div>
}

function render() {
  ReactDOM.render(<Counter value={store.getState()}></Counter>, document.getElementById('root'));
}

render()

核心概念

  • store
    保存數(shù)據(jù)的容器，通過createStore來生成。
import { createStore } from 'redux'
const store = createStore(Reducer, 110)
  • state
    包含所有的數(shù)據(jù)。
    一個(gè)state對應(yīng)一個(gè)view。
const state = store.getState()
  • action
    view發(fā)出action，通知state進(jìn)行改變。
    action是一個(gè)對象，type屬性必須有，表示名稱。其他屬性自由設(shè)置。
    action是改變state的唯一方法。
const action = {
  type: 'INCREMENT',
  payload: 'learn redux'
}
  • action creator
    生成action的函數(shù)
const ADD_TODO = '添加todo'
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo('learn redux')
  • store.dispatch
    view通過此方法發(fā)出action。也是唯一的方法。
    store.dispatch接受action對象作為參數(shù)，然后將其發(fā)送出去。
  store.dispatch({
    type: 'INCREMENT',
    payload: 'learn redux'
  })

store.dispatch(addTodo('learn redux'))
  • reducer
    state的計(jì)算過程。接受action和當(dāng)前state作為參數(shù)，返回新的state。
function Reducer(state = 0, action) {
  const {type} = action
  if (type === 'INCREMENT') {
    return state + 1
  } else if (type === 'DECREMENT') {
    return state - 1
  } else {
    return state
  }
}

一般情況下，store.dispatch方法會觸發(fā)reducer的自動執(zhí)行，所以store生成時(shí)，需要傳入reducer

const store = createStore(Reducer, 110)

reducer是純函數(shù)，同樣的輸入，必定得到同樣的輸出。
reducer函數(shù)里的state不能改變，必須返回一個(gè)全新的對象。最好把state設(shè)置為只讀。

// state是對象
function reducer(state, action) {
  return { ...state, ...newState}
}
// state是數(shù)組
function reducer(state, action) {
  return [ ...state, newItem]
}
  • store.subscribe()
    監(jiān)聽方法，state改變，就會立即執(zhí)行。
    把view更新的函數(shù)放入其中，就會實(shí)現(xiàn)view的自動渲染。
store.subscribe(() => {
  console.log(store.getState())
  render()
})

如果store.subscribe方法返回函數(shù)，調(diào)用這個(gè)函數(shù)，即可解除監(jiān)聽

let unsubscribe = store.subscribe(() => {
  connsole.log(store.getState())
})
unsubscribe() // 解除監(jiān)聽

reducer的拆分

項(xiàng)目中state一般很龐大，所以需要對reducer進(jìn)行拆分

拆分前的代碼：

const Reducer = (state = {}, action = {}) => {
  const { type, payload } = action
  switch (type) {
    case 'ADD_CHAT':
      return Object.assign({}, state, {
        charLog: state.charLog.concat(payload)
      })
    case 'CHANGE_STATUS':
      return Object.assign({}, state, {
        statusMessage: payload
      })
    case 'CHANGE_USERNAME':
      return Object.assign({}, state, {
        userName: payload
      })
    default: return state
  }
}

拆分后的文件結(jié)構(gòu)


chatLog.js

export default function chatLog (state = [], action) {
  const { type, payload } = action
  switch (type) {
    case 'ADD_CHAT':
      return [...state, payload]
    default: return state
  }
}

statusMessage.js

export default function statusMessage (state = '', action) {
  const { type, payload } = action
  switch (type) {
    case 'CHANGE_STATUS':
      return payload
    default: return state
  }
}

userName.js

export default function userName (state = '', action) {
  const { type, payload } = action
  switch (type) {
    case 'CHANGE_USERNAME':
      return payload
    default: return state
  }
}

index.js

import chatLog from './chatLog'
import statusMessage from './statusMessage'
import userNameChange from './userName'
import { combineReducers } from 'redux'

// 寫法1：不推薦
// export default function (state = {}, action = {}) {
//   return {
//     chatLog: chatLog(state.chatLog, action),
//     statusMessage: statusMessage(state.statusMessage, action),
//     userName: userNameChange(state.userName, action)
//   }
// }

// 寫法2：推薦
export default combineReducers({
  chatLog,
  statusMessage,
  userName: userNameChange
})

當(dāng)需要使用拆分后的reducer時(shí)，只需要在src的index.js下

import rootReducer from './reducer'
const store = createStore(rootReducer)

中間件

位于“中間”，為“兩側(cè)”提供服務(wù)的函數(shù)。

redux-logger

npm i redux-logger安裝包
index.js中修改下面幾處：

import { applyMiddleware, createStore } from 'redux'
import { createLogger } from 'redux-logger'

const logger = createLogger()

const store = createStore(
  reducer,
  applyMiddleware(logger)
)

再次使用時(shí)，可以看到


redux-thunk

用來搭建異步action構(gòu)造器

npm i redux-thunk安裝包

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, createStore } from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducer from './reducer'

const logger = createLogger()

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)

function increment () {
  return {type: 'INCREMENT'}
}

function asyncIncrement () {
  return function (dispatch, getState) {
    setTimeout(() => {
      dispatch(increment())
    }, 1000);
  }
}

store.subscribe(() => {
  render()
})

const Counter = (props) => {
  return <div>
    <h1>{props.value}</h1>
    <button onClick={props.increment}>Increment</button>
    <button onClick={props.asyncIncrement}>AsyncIncrement</button>
  </div>
}

function render() {
  ReactDOM.render(
  <Counter 
    value={store.getState().increment}
    increment={() => store.dispatch(increment())}
    asyncIncrement={() => store.dispatch(asyncIncrement())}></Counter
  >, 
  document.getElementById('root'));
}

render()

react和redux的連接

  • 基本概念
    react-redux中組件分兩類：ui組件和容器組件
    ui組件：只負(fù)責(zé)ui呈現(xiàn)，沒邏輯
    容器組件：管理數(shù)據(jù)和業(yè)務(wù)邏輯，有內(nèi)部狀態(tài)，使用redux的api
    connect：用于從ui組件生成容器組件。

  • 小案例

目標(biāo)：實(shí)現(xiàn)ui組件和容器組件的分離，實(shí)現(xiàn)點(diǎn)擊+1和點(diǎn)擊-1的功能

create-react-app react-redux-demo 創(chuàng)建新項(xiàng)目
npm i redux react-redux 安裝包

文件結(jié)構(gòu)


CouterContainer.js容器組件

import {connect} from 'react-redux'
import Counter from '../components/Counter'

const mapStateToProps = state => {
  return {
    value: state
  }
}

const mapDispatchToProps = dispatch => {
  return {
    handleIncrement () {
      dispatch({
        type: 'INCREMENT'
      })
    },
    handleDecrement () {
      dispatch({
        type: 'DECREMENT'
      })
    }
  }
}

const CounterContainer = connect (
  mapStateToProps,
  mapDispatchToProps
) (Counter)

export default CounterContainer

Counter.jsui組件

import React from 'react'

const Counter = (props) => {
  return (
    <div>
      <h1>Counter Component</h1>
      <h1>{props.value}</h1>
      <button onClick={props.handleIncrement}>點(diǎn)擊+1</button>
      <button onClick={props.handleDecrement}>點(diǎn)擊-1</button>
    </div>
  )
}

export default Counter

store > index.js

import {createStore} from 'redux'

function reducer (state = 100, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(reducer)

export default store

index.js引入Provider和store

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root'));

app.js 引入容器組件

import React from 'react';
import CounterContainer from './containers/CouterContainer'

function App() {
  return (
    <div className="App">
      <CounterContainer />
    </div>
  );
}

export default App;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容