react 中 redux的简单使用

npx create-react-app counter  --template redux  

一、安装redux

npm install redux --save
# 或
yarn add redux

二、redux文件目录的构建（src目录下创建store文件夹）

1、创建store/index.js 文件
store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有的reducer给他

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

const store = createStore(reducer)

export default store

2、创建store/reducer.js(仓库)
reducer就是根据action来对state进行操作，redux中的state是不能直接修改的，只能通过action来修改，相当于我们单列定义中的setter方法

import { ADD_NUMBER, SUB_NUMBRT } from './constants.js'

const initialState = {
    counter: 0
}
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_NUMBER:
            return { ...state, counter: state.counter + action.num };
        case SUB_NUMBRT:
            return { ...state, counter: state.counter - action.num };
        default:
            return state;
    }
}

export default reducer

通过reducer操作后返回一个新的state，比如这里根据action的type分别对state.num进行加减

3、创建一个store/constants.js文件 （常量）

     （也可以直接写到reducer上面）
const ADD_NUMBER = 'ADD_NUMBER';
const SUB_NUMBRT = 'SUB_NUMBRT';

export {
    ADD_NUMBER,
    SUB_NUMBRT
}

4、创建一个store/actionCreators.js(事件）
redux将每一个更改动作描述为一个action，要更改state中的内容，你需要发送一个action。一个action是一个简单的对象 用来描述state发生了什么变更

import { ADD_NUMBER, SUB_NUMBRT } from './constants'

const addAction = (count) => ({
    type: ADD_NUMBER,
    num: count
})
const subAction = (count) => ({
    type: SUB_NUMBRT,
    num: count
})

export {
    addAction,
    subAction
}

5、使用redux

import React, { Component } from 'react';
import store from '../src/store'
import {
  addAction, subAction
} from '../src/store/actionCreators';
class ReduxCpn extends Component {

  constructor(props) {
    super(props)
    const storeState = store.getState()
    this.state = {
      count: storeState.counter,
      name: ''
    }
    store.subscribe(() => {
      this.setState({
        count: store.getState().counter
      })
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.add.bind(this)}>加</button>
        <button onClick={this.reduce.bind(this)}>减</button>
        <h2>{this.state.count}</h2>
      </div>
    );
  }

  add() {
    const action = addAction(3)//store.dispatch()是组件发出action的唯一方法。
    store.dispatch(action)
  }
  reduce() {
    const action = subAction(3)
    store.dispatch(action)
  }
}

export default ReduxCpn;

store.dispatch()是组件发出action的唯一方法。

reducer文件拆分，降低了reduer文件的复杂度

随着项目的扩大，会出现很多页面，同时会产生很多页面的数据需要维护，如果所有的数据都放在store/reducer文件中进行管理，会比较乱，这时候就可以根据不同的页面拆分成不同的reducer文件。

在store/reducer里面进行合并 通过combineReducers函数进行合并

import { combineReducers } from 'redux'
import  counterReducer  from './counter/reducer'

const reducer = combineReducers({
    counterInfo : counterReducer
})

export default reducer

使用redux：

import React, { Component } from 'react';
import store from '../src/store'
import {
  addAction, subAction
} from '../src/store/counter/actionCreators';
class ReduxCpn extends Component {

  constructor(props) {
    super(props)
    const storeState = store.getState()
    this.state = {
      count: storeState.counterInfo.counter,
      name: ''
    }
  } 

  render() {
    return (
      <div>
        <button onClick={this.add.bind(this)}>加</button>
        <button onClick={this.reduce.bind(this)}>减</button>
        <h2>{this.state.count}</h2>
      </div>
    );
  }
  componentDidMount(){
    store.subscribe(() => {
      this.setState({
        count: store.getState().counterInfo.counter
      })
    })
  }
  add() {
    const action = addAction(3)
    store.dispatch(action)//store.dispatch()是组件发出action的唯一方法。
  }
  reduce() {
    const action = subAction(3)
    store.dispatch(action)
  }
}

export default ReduxCpn;

这里面都出现了一个store.subscribe

store.subscribe(()=>{
            this.setState(store.getState())
        })

主要是用来监听store中每次修改的情况