react中使用react-redux

1、安装redux、react-redux

npm install --save redux react-redux

　　(1) 这里解释一下react-redux、redux 的作用

　　     redux 是状态仓库

　　　 react-redux 用于把 react 和 redux 进行关联，使所有的子组件都可以拿到state

2、在app.js 文件中引入redux

import React from 'react';
import ReactDOM from 'react-dom';
// createStore 用户创建仓库,applyMiddleware中间件
import { createStore,applyMiddleware } from 'redux';
// 多个reduce 合并
import rootReducers from './reducers/index';
// Provider 用于把 react 和 redux 进行关联，使所有的子组件都可以拿到state
import { Provider } from 'react-redux';
// 第三方插件。处理异步状态修改
import thouk from 'redux-thunk'   // 中间件需要就安装
// 第三方中间件 store日志打印
import Logger from 'redux-logger'   // 中间件需要就安装

const store = createStore(rootReducers,{},applyMiddleware(thouk,Logger ));  //可设置多个中间件，使用逗号隔开， applyMiddleware 中间件不需用可以删除

ReactDOM.render(
  // React.StrictMode 严格模式 是一个用来检查项目中潜在问题的工具
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// 监听数据变化
store.subscribe(() => {
  console.log('state', store.getState());
})

3、定义action （action：存放数据的对象，即消息的载体）

action文件目录

 

 

 counter.js

export function increment(num){
    return {
        type: "INCREMENT", num 
　　}
} 

export function decrement(num){ 
　　return { 
　　　　type: "DECREMENT", num 

　　} 
}

user.js

export function addUser(value){
    return{
            type: "ADD_USER",
            value: value,
        }
}

 

4、定义 reducers 文件  （reducers ：承担计算 State 的功能）

reducers目录

 

 

 counter.js

const counter = (state = 0,action)=>{
    switch(action.type){
        case "INCREMENT":
            return state + action.num;
        case "DECREMENT":
            return state - action.num;
        default:
            return state;
    }
}

export default counter;

user.js

const data = {
    value: {
        name:'张三',
        sex: '男'
    }
}

const user = (state = data,action)=>{
    switch(action.type){
        case "ADD_USER":
            return Object.assign({},state,action);
        default :
            return state
    }
}

export default user;

index.js (这里使用 combineReducers 合并多个 reduce，因为 createStore 方法只接收一个 reduce参数)

import { combineReducers } from 'redux';
import counter from './counter';
import user from './user'

// 合并多个 reduce
const rootReducers = combineReducers({
    counter:counter,
    user:user
});

export default rootReducers;

 

5、组件中修改、渲染 store 数据

import React from 'react';
import './App.css';
// connect 用于组件和 redux连接起来
import { connect } from 'react-redux';
// import { increment,decrement } from './actions/counter';
import * as counterAction from './actions/counter';
// bindActionCreators是redux的一个自带函数，作用是将单个或多个ActionCreator转化为dispatch(action)的函数集合形式。
// 开发者不用再手动dispatch(actionCreator(type))，而是可以直接调用方法。
import { bindActionCreators } from 'redux';
import User from './components/user';

class App extends React.Component{

  render(){
    // const { increment,decrement } = this.props;

    return(
      <div className="App">
        <h1>{ this.props.counter }</h1>
        {/* <button onClick={ ()=> increment(10) }>
          增加
        </button>
        <button onClick={ ()=> decrement(5) }>
          减少
        </button> */}
        <button onClick={ ()=> this.props.counterAction.increment(10) }>
          增加
        </button>
        <button onClick={ ()=> this.props.counterAction.decrement(5) }>
          减少
        </button>
        <User/>
    </div>
    )
  }
}

// 遍历 state 绑定到组件props上
const mapStateToProps = (state)=>{
  return{
    counter: state.counter
  }
}

// 遍历 dispatch 绑定到组件 props 上
// const mapDispatchToProps = (dispatch)=>{
//   return {
//     increment: (num)=>{ dispatch(increment(num)) },
//     decrement: (num)=>{ dispatch(decrement(num)) }
//   }
// }

const mapDispatchToProps = (dispatch)=>{
  return{
    counterAction: bindActionCreators(counterAction,dispatch)
  }
}


// 通过connect把组件和redux进行关联
export default connect(mapStateToProps,mapDispatchToProps)(App)