Redux基本使用

简介

本文介绍 redux 的使用方法。

主要包括以下几个部分

  • redux 基本思路
  • 单独使用 redux
  • 配合 react-redux 使用
  • redux-devtools
  • 使用修饰器

redux 基本思路

redux 是用来管理公共状态,公共 state 都存放在 store 中。使用 createStore() 方法新建一个 store

直接修改容易引起误操作,需要有条件的操作 store ,不能直接修改

使用 store.getState() 来获取 state

使用 store.dispatch(action) 修改 state

使用 store.subscribe(listener) 实现监听,如果有改动,进行对应的响应操作

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)

// 派发事件
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(
  
    
  ,
  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 (
      
        

目前计数:{this.props.count}

) } } 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

你可能感兴趣的:(Redux基本使用)