React 基础笔记(Redux thunk 版本)(十五)

React-redux 最主要的作用就是让 action 返回内容除了对象还可以是方法

(1) 安装 redux

 npm i redux -S

(2) 安装 redux-thunk 插件

npm i redux-thunk -S

(3) 使用中间件改变仓库 store 下面的 index.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
const middleware = [thunk]
const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose

const enhancer = composeEnhancers(
  applyMiddleware(...middleware)
  // other store enhancers if any
)
const store = createStore(reducer, enhancer)

export default store

(4) 创建 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
}

(5) 创建子弹两个文件 actiontypes.js 和 actionCreater.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 创建子弹

export const ACTION_INIT_LIST = value => {
  return {
    type: CHANGE_VALUE,
    value
  }
}
//利用redux-thunk 返回方法
export const ACTION_METHOD_INIT = () => {
  return dispatch => {
    axios.get('/api/data1').then(res => {
      console.log(res.data)
      let value = res.data //获取到数据
      let result = ACTION_INIT_LIST(value) //把数据封装到actions里面
      dispatch(result) //然后发射出去
    })
  }
}

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