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")
)