react-redux

react-redux
react-redux和上篇的redux入门知识的逻辑是一样的.采用store存储数据,action定义行为对象,reducer处理行为对象.只是通过mapStateToProps将state映射到组件的props方法中,mapDispatchToProps将修改数据的方法映射到组件的props中.加强store和组件的连接代替了redux中的store.dispatch和store.getState方法.
下面是一个完整的例子

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux';
class Counter extends React.Component{
  render(){
    //计数器实现
    const value =this.props.value;//接收从store传给props的值
    const onAddClick =this.props.onAddClick;//接收从store传给props的函数
    const onDecClick =this.props.onDecClick;//接收从store传给props的函数
    return (
      <div>
          <h1>计数器的值为:{value}</h1>
          <button onClick={onAddClick}>计数加1</button>
          <button onClick={onDecClick}>计数减1</button>
      </div>
    )
  }
}

//动作为对象
const addAction={
  type:"add"
}
const decAction={
  type:"dec"
}
//reducer
function reducer(state={num:0},action){
  switch(action.type){
    case "add":
      state.num++;
      console.log(state.num);
      break;
    case "dec":
      state.num--;
      break;
    default:
      break;
  }
  return {...state}
}

//store
const store = createStore(reducer);

//从store中的state传值给props
function mapStateToProps(state){
  return{
    value:state.num
  }
}
//注册行为,将修改数据的方法映射到props,默认会传入store中的dispatch方法,将动作传入reducer处理
function mapDispatchToProps(dispatch){
  return{
    onAddClick:()=>{dispatch(addAction)},
    onDecClick:()=>{dispatch(decAction)}
  }
}
//将上面的两个方法,数据仓库的state和修改state的方法映射到组件上,形成新的组件,用connect关联
const App = connect(mapStateToProps,mapDispatchToProps)(Counter)

//渲染App
//将state映射到组件的props方法中,将修改数据的方法映射到组件的props中.加强store和组件的连接
//代替了redux中的store.dispatch和store.getState
ReactDOM.render(
  <Provider store={store}>
    <App></App>
  </Provider>,document.querySelector("#root")
)