簡介

本文介紹 redux 的使用方法。

主要包括以下幾個部分

• redux 基本思路
• 單獨使用 redux
• 配合 react-redux 使用
• redux-devtools
• 使用修飾器

redux 基本思路

redux 是用來管理公共狀態(tài)，公共 state 都存放在 store 中。使用 createStore() 方法新建一個 store

直接修改容易引起誤操作，需要有條件的操作 store ，不能直接修改

使用 store.getState() 來獲取 state

使用 store.dispatch(action) 修改 state

使用 store.subscribe(listener) 實現監(jiān)聽，如果有改動，進行對應的響應操作

action 是一個對象，基本格式 { type: TEST, payload: { name: 'ddd' } }

action creator 是 action 生成函數，根據傳入的參數生成對應的 action

redux 基本使用

redux 安裝命令：npm i redux --save

• 新建 reducer 文件

// action type
const COUNT_ADD = "數量增加"
const COUNT_MINUS = "數量減少"

// initial state
const initState = {
  test: 'test'
  count: 10
}

// reducer
export default function(state = initState, action) {
  switch(action.type) {
    case COUNT_ADD:
      return {
        ...state,
        count: state.count + 1
      }
    case COUNT_MINUS:
      return {
        ...state,
        count: state.count - 1
      }
    default:
      return state
  }
}

// action creator
export function countAdd() {
  return { type: COUNT_ADD }
}
export function countMinus() {
  return { type: COUNT_MINUS }
}

• 如果有多個 reducer ，可以使用 combineReducers 方法將多個 reducer 合并成一個

import { combineReducers } from 'redux'

import app from './app'
import user from './user'

export default combineReducers({ app, user })

• 使用 createStore 生成 store

import { createStore } from 'redux'
import rootReducer from './reducers'
export default createStore(rootReducer)

// 使用中間件
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
export default createStore(rootReducer, applyMiddleware(thunk))

單獨使用 redux

const init = store.getState()
console.log(init)

function listener() {
  const { count } = store.getState()
  console.log(`目前計數為：${count}`)
}
store.subscribe(listener)

// 派發(fā)事件
store.dispatch(countAdd())
store.dispatch(countAdd())
store.dispatch(countMinus())

配合 react-redux 使用

在 react 項目中一般配合 react-redux 使用

react-redux 安裝命令：npm i react-redux --save

• react-redux 提供了 Provider ，該組件將 store 放到 context 中，方便子孫組件直接使用 store
• react-redux 提供了 connect(mapStateToProps, mapDispatchToProps) 用來將對應的 state 和 dispatch 放到組件的 props 下

// ...
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
import React from 'react'
import { connect } from 'react-redux'
import { countAdd, countMinus } from '../../store/reducers/app'
import { WingBlank, WhiteSpace,Button } from 'antd-mobile'

class Demo extends React.Component {
  render() {
    return (
      <WingBlank style={{marginTop: 50}}>
        <p>目前計數：{this.props.count}</p>
        <WhiteSpace />
        <Button type="warning" onClick={this.props.countAdd}>+1</Button>
        <WhiteSpace />
        <Button type="primary" onClick={this.props.countMinus}>-1</Button>
      </WingBlank>
    )
  }
}
export default connect(
  ({ app }) => app,
  { countAdd, countMinus }
)(Demo)

備注：

• connect 高級組件處理之后，在 props 中就有對應的 state 和 action 了
• connect 的第一個參數是將 state 轉為 props 的方法 mapStateToProps ，當然也可以直接傳對象
• connect 的第二個參數是將 dispatch 轉為 props 的方法 mapDispatchToProps ，當然也可以直接傳對象

redux-devtools

redux-devtools 是谷歌瀏覽器的插件，方便調試

需要在代碼中打開

// 沒有中間件時開啟devToolsExtension
import { createStore } from 'redux'
import rootReducer from './reducers'
export default createStore(rootReducer, window.devToolsExtension ? window.devToolsExtension() : f=>f)

// 使用中間件并開啟devToolsExtension
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
export default createStore(rootReducer, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f=>f
))

使用修飾器

修飾器相關知識參考：裝飾器模式（Decorator模式）理解、使用

create-react-app 項目為例：

如果 babel 版本低于 7.x ，需要下載babel-plugin-transform-decorators-legacy ：

npm i babel-plugin-transform-decorators-legacy --save

• 修改 package.json 文件

{
  // ...
  "babel": {
    // ...
    "plugins": [
      "transform-decorators-legacy"
      // ...
    ]
  },
  // ...
}

如果是 babel 7.x 及以上版本，需要下載 @babel/plugin-proposal-decorators ：

npm i @babel/plugin-proposal-decorators --save

• 修改 package.json 文件

{
  // ...
  "babel": {
    // ...
    "plugins": [
      // ...
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ]
  },
  // ...
}

• 在組件中 connect 就可以使用修飾器格式了。其他的，比如 withRouter 都可以用修飾器格式

// ...
@connect(
  ({ test }) => ({ count: test.count}),
  { testCountAdd }
)
class Demo extends React.Component {
  // ...
}
export default Demo