Redux的react-redux状态管理

react-redux我个人认为比用redux写稍微简单那么一丢丢

下面还是通过一个案例来具体演示吧，点击让这个数增加

首先还是安装

sudo cnpm install react-redux --save

下面是代码，注释我基本都写在里面了

class Counter extends React.Component{
  render(){
    //计数,通过store的state传给props,直接通过props就可以将state的数据获取
    const value = this.props.value;
    //将修改数据的事件或者方法传入到props
    const onAddClick = this.props.onAddClick
    //等同于vuex的mapMutation mapState
    return(
      <div>
        <h1>计数的数量:{value}</h1>
        <button onClick={onAddClick}>数字+1</button>
      </div>
    )
  }
}

const addAction ={
  type:'add'
}

function reducer(state={num:0},action){
  switch(action.type){
    case "add":
      state.num++;
      break;
    default:
      break;
  }
  return {...state}
}

const store = createStore(reducer)

//将state映射到props函数
function mapStateToProps(state){
  return{
    value:state.num
  }
}

//将修改state数据的方法，映射到props,默认会传入store里到dispatch方法,实现了方法的共享
function mapDispatchToProps(dispatch){
  return {
    onAddClick:()=>{dispatch(addAction)}
  }
}

//将上面到这两个方法,将数据仓库里到state和修改state的方法映射到组件上，形成新的组件

const App =connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

// Provider组件:自动的将store里的state和组件进行关联
ReactDOM.render(
  <Provider store={store}>
    <App></App>
  </Provider>,
  document.querySelector("#root")
)