React 基础笔记(Redux 基础版本)(十四)

React

发布日期: 2019-12-06

更新日期: 2019-12-08

文章字数: 757

阅读时长: 3 分

阅读次数:

Redux 就是存放公共数据的地方

Redux 里面有使用插件的比如 thunk,saga,react-redux 也有什么都不使用的。

Redux 基础版本

首先要建立仓库架构体系

(store,reduce,actiontypes,actioncreater) 4 个文件
actioncreater 里面是方法，必须返回一个对象. 里面就两个属性一个 type 一个 value,value 可以没有

派发 action,利用 store.dispatch(action) actions 里面必须有 return 返回数据
监听数据的改变 store.subscribe(this.事件)
然后在上面的事件中更新数据 this.setState(store.getState())

(1)使用 Redux 就必须要提前安装

npm i redux -S

(2)在 src 目录下创建一个 store 文件夹,里面创建一个 index.js 文件作为公共仓库

公共模板

import { createStore } from 'redux'
// 引入reducer
import reducer from './reducer'
// 放入reducer
const store = createStore(reducer)
export default store

(3)创建 reducer 文件他里面接受两个参数(state,action) state 就是获取所有的公共数据

import { CHANGE_VALUE, CLICK_CHANGE, DELETE_ITEM } from './actiontypes'

const defaultState = {
  inputValue: '123',
  list: [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.'
  ]
}
export default (state = defaultState, action) => {
  //这里判断action的type然后在返回state
  if (action.type === CHANGE_VALUE) {
    let newresult = JSON.parse(JSON.stringify(state)) //必须要重新生成一个新的对象,也不能使用Object.asign这样有的时候不起作用,而且每个判断里面必须有返回值
    newresult.inputValue = action.value
    return newresult
  }
  if (action.type === CLICK_CHANGE) {
    let newState = JSON.parse(JSON.stringify(state))
    if (newData.inputValue != null) {
      newData.list.push(newData.inputValue)
      newData.inputValue = ''
    }
    return newData
  }
  // 这里就是删除方法,必须返回新数据
  if (action.type === DELETE_ITEM) {
    let newState = JSON.parse(JSON.stringify(state))
    newData.list.splice(action.value, 1)
    return newData
  }
  return state
}

(4)调试的时候要借助 redux 工具,store 里面必须要加入这句话 window 开头的

import { createStore } from 'redux'
//引入reducer
import reducer from './reducer'
//放入reducer
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store

这样后端基本上完事，下面就是前台的

(5) 创建子弹两个文件 actiontypes.js 和 actionCreater.js

actiontypes.js 可以理解为子弹名称

export const CHANGE_VALUE = 'change_value'
export const CLICK_CHANGE = 'click_change'
export const DELETE_ITEM = 'delete_item'

actioncreater.js 制造子弹(必须是方法，返回的是一个对象)

import { CHANGE_VALUE, CLICK_CHANGE, DELETE_ITEM } from './actiontypes'

export const ACTION_CHANGE_VALUE = value => {
  return {
    type: CHANGE_VALUE,
    value
  }
}
export const ACTION_CLICK_CHANGE = () => {
  return {
    type: CLICK_CHANGE
  }
}
export const ACTION_DELETE_ITEM = value => {
  return {
    type: DELETE_ITEM,
    value
  }
}

(6)组件里面发射出去

//先引入子弹
import {
  ACTION_CHANGE_VALUE,
  ACTION_CLICK_CHANGE,
  ACTION_DELETE_ITEM
} from './store/actionCreater'

 <Button
  type="primary"
  style={{
    width: '150px',
    height: '30px',
    marginTop: '20px',
    marginLeft: '50px'
  }}
  onClick={this.handClick}
>
  请输入文字
</Button>

 // 发射出去子弹

 handClick() {
    let result = ACTION_CLICK_CHANGE()
    store.dispatch(result)
  }

(7)组件里面使用的时候

在构造函数里面监听数据的改变


constructor(props){
  super(props)
  //获取仓库的数据就是store.getState()
  console.log(store.getState())
  // 输出的结果就是indexValue,list
  this.state = store.getState();
  this.storechange = this.storechange.bind(this)
    //监听,事件里面更新数据
    store.subscribe(this.storechange)
}

//方法里面直接更新数据
  storechange() {
    this.setState(store.getState())
  }