react中使用redux

react中redux

三大原则 redux中文网

• 单一数据源
  • 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
• state是只读的
  • 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
• 使用纯函数来修改
  • 描述 action 如何改变 state tree。reducer（ 它接收先前的 state 和 action，并返回新的 state。 ）

项目中使用rudex

1. **引入redux包-- npm i redux react-redux redux-thunk **

2. src文件夹下面创建一个store文件夹（子结构为--index.js--state.js--reducers.js--actions.js）。

3. 使用redux（先为store数据）

• // state.js
  // 声明默认值
  // eslint-disable-next-line import/no-anonymous-default-export
  export default {
      addCuntNumber:1,
  }
  

• / reducers.js
  // 工具函数，用于组织多个reducer，并返回reducer集合
  import { combineReducers } from 'redux'
  // 默认值
  import defaultState from './state.js'
  // 一个reducer就是一个函数
  function addCuntNumber (state = defaultState.addCuntNumber, action){
    console.log('action',action);
    switch (action.type) {
      case 'CHANGE_NUMBER': 
        return action.data;
      default:
        return state;
    }
  }
  // 导出所有reducer
  export default combineReducers({
      addCuntNumber
  })
  

• // actions.js
  // action也是函数
  export function setAddCuntNumber (data){
    return (dispatch , getState) =>{
      dispatch({type: 'CHANGE_NUMBER', data: data})
    }
  }
  

• // index.js
  // applyMiddleware: redux通过该函数来使用中间件
  // createStore: 用于创建store实例
  import { applyMiddleware, createStore } from 'redux'
  // 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，
  // 需要给dispatch函数传入action对象；但如果我们使用了这个中间件，那么就可
  // 以传入一个函数，这个函数接收两个参数:dispatch和getState。这个dispatch可
  // 以在将来的异步请求完成后使用，对于异步action很有用
  import thunk from 'redux-thunk'
  // 引入reducer
  import reducers from './reducers.js'
  // 创建store实例
  let store = createStore(
    reducers,
    applyMiddleware(thunk)
  )
  export default store
  

4. 在页面中使用

   • import React, { Component } from 'react'
     import store from '../redux';
     import { setAddCuntNumber } from '../store/actions'
     
     export default class addCunt extends Component {
         constructor(props) {
             super(props)
             this.state = {
                 number: store.getState().addCuntNumber,
             }
         }
         componentDidMount(){
             // store.getState() 得到store中数据
             // store.dispatch(setAddCuntNumber(2)) 调用方法改变store中值
             console.log(store.getState().addCuntNumber,store); // 1 ,{dispatch(),getState(),replaceReducer(),subscribe()}
             store.dispatch(setAddCuntNumber(2))
             console.log(store.getState().addCuntNumber,store);// 2 ,{dispatch()-（调用更新）,getState()-(得到数据),replaceReducer()-(用于替换 store 中原原有的 reducer ，以此可以改变 store 中原有的状态的数据结构),subscribe()-(监听store中每次修改情况)}
             this.setState({
                 number:store.getState().addCuntNumber
             })
         }
     
         render() {
             const { number } = this.state;
             return (
                 <div>
                     {number}
                 </div>
             )
         }
     }