个人对redux和react-redux的初步使用总结

第一步：创建文件夹存放 reducers，创建测试的 counter.js

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

export default counter

第二步：在index.js文件 引入redux和react-redux的高阶组件 Provider

import { createStore } from 'redux'
import reducer from './reducers/counter'
import { Provider } from 'react-redux'
//创建仓库，store
const store = createStore(reducer)

//高阶组件进行包裹根组件
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

第三步：使用react-redux 高阶组件 connect ，进行数据绑定和连接

import { connect } from "react-redux";

//创建mapStateToProps，用于store和当前组件的连接
const mapStateToProps = (state) => {
  return {
    counter: state,
  };
};

// ReduxDemo为当前组件的名称，进行导出 connect
export default connect(mapStateToProps)(ReduxDemo);

// 此时已经可以 通过 this.props.counter获取store的counter值

第四步：改变 store 仓库的值，定义 actions ，相当于函数

1、创建actions文件夹，新建 counter.js

//导出函数
export function increment(){
    return {
        type:"INCREMENT",
    }
}

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

2、在组件中引用，进行组件数据动态改变，并且能改变 store的值

import {increment,decrement} from './actions/counter.js'

class ReduxDemo extends Component {
    let {increment,decrement,counter} = this.props
    render(){
        return(
             <div>
                 <h3>{counter}</h3>
                <button  onClick={()=>(increment())} >+</button >
               <button  onClick={()=>(decrement())}>-</button >
             </div>
        )
    }
    
}

const mapDispatchToProps = (dispatch)=>{
    return{
        increment:()=>{ dispatch(increment()) },
        decrement:()=>{ dispatch(decrement()) },
    }
}

//此时和上面的 mapStateToProps，同时传入connect，顺序不能颠倒，ReduxDemo为组件名称
export default connect(mapStateToProps,mapDispatchToProps )(ReduxDemo);

上面这种引入的方法简直是太麻烦了，如果有很多的action，那岂不是每次一个一个的引入

import * as couterActions from './actions/counter.js'  //将所有的引入
import { bindActionCreators } from "redux"; //引入redux操作函数


class ReduxDemo extends Component {
    let {couterActions,counter} = this.props
    render(){
        return(
             <div>
                 <h3>{counter}</h3>
                <button  onClick={()=>(couterActions.increment())} >+</button >
               <button  onClick={()=>(couterActions.decrement())}>-</button >
             </div>
        )
    }
    
}


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

export default connect(mapStateToProps,mapDispatchToProps )(ReduxDemo);