欢迎光临
我们一直在努力

React.13 Redux 使用与封装

Redux 简介

React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及:

  • 代码结构
  • 组件之间的通信

由此我们需要引入Redux。Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

file

设计思想

  1. Web 应用是一个状态机,视图与状态是一一对应的。
  2. 所有的状态,保存在一个对象里面(唯一数据源)。

注意:flux、redux都不是必须和react搭配使用的,因为flux和redux是完整的架构,在学习react的时候,只是将react的组件作为redux中的视图层去使用了。

使用原则

  • 唯一的数据源 - store是唯一的
  • 状态是只读的 - 只有store可以改变自己的内容
  • 数据的改变必须通过纯函数完成 - reducer必须是一个纯函数

纯函数指:固定输入,就一定有固定输出,且不会产生副作用的函数(不能对传入的参数进行修改。)

安装流程

npm install redux -S
npm install react-redux -S
npm install redux-devtools -S

核心方法

  • createState - 创建store
  • store.dispatch - 派发action并传递给store
  • store.getState 获取store
  • store.subscribe 定义store改变后的回调函数

文档布局

store/index.js 创建仓库

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer,
              window.__REDUX_DEVTOOLS_EXTENSION__ 
              && window.__REDUX_DEVTOOLS_EXTENSION__())

export default  store

store/reducer.js 修改state

const defaultState = {
  inputValue: '',
  list: []
}

// reducer 可以接收state 但不能修改state
export default (state = defaultState, action) => {
    // 判断action.type 并修改store中的值
  if(action.type === 'change_input_value'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }else if(action.type === 'add_todo_item'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }else if(action.type === 'del_todo_item'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.splice(action.index,1)
    return newState
  }
  return state
}

组件中触发

// 引入store
import store from './store'

export default class TodoList extends Component {
  constructor(props){
    super(props)
    // 将store中的值赋给组件state
    this.state = store.getState()
    this.changeHandler = this.changeHandler.bind(this)
    this.storeChangeHandler = this.storeChangeHandler.bind(this)
    this.clickHandler = this.clickHandler.bind(this)
    // 数据改变后执行回调函数 利用setState触发数据重新渲染
    store.subscribe(this.storeChangeHandler)
  } 
  changeHandler(e){
    // 创建action
    const action = {
      type:'change_input_value',
      value: e.target.value
    }
    // dispatch并传递action
    store.dispatch(action)
  }
  clickHandler(){
    const action = {
      type:'add_todo_item',
    }
    store.dispatch(action)
  }
  completeClickHanlder(index){
    const action = {
      type:'del_todo_item',
      index
    }
    store.dispatch(action)
  }
  storeChangeHandler(e){
    this.setState(store.getState)
  }
}

文件封装

  • 封装type有利于排错,如果写错字母会提示undefined
  • 封装action有利于统一管理和单元测试

封装action下的types 至 actionType.js

export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM = 'add_todo_item'
export const DEL_TODO_ITEM = 'del_todo_item'

封装action 至 actionCreator.js

import {CHANGE_INPUT_VALUE , ...} from './actionType'
export default getInputChangeAction(value){
    return {
        type:'CHANGE_INPUT_VALUE',
        value
    }
}
export defalut ....

对应组件触发

import { getInputChangeAction } from './store/actionCreator'

changeHandler(e){
    const action = getInputChangeAction(e.target.value)
    store.dispatch(action)
}
赞(0) 打赏
未经允许不得转载:散人研 » React.13 Redux 使用与封装
分享到: 更多 (0)

评论 抢沙发

6 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏