1.redux是react的状态管理工具,可以用来存放公共数据,因此也可用来作为组件间参数传递的方法。
2.组件传参,需要有一个公共的父组件。在父组件中引入Provider。通过Provider将store传递到子组件中,这样子组件就可以使用store中的数据。
在render函数中,将返回的HTML面板用 <Provider store={ store } ></Provider>包裹起来,这样就可以实现传递
main.js
import child1 .... //引入组件
import child2 .... //引入组件 import {Provider} from 'react-redux'
....
render(){
return (
<Provider store = {store}> //添加Provider标签
<div>
<child1>111</child1>
<child2>222</child2>
</div>
</Provider>
)
}
....
3. 创建redux所需要的基本的四个文件:Actions.js ActionTypes.js Store.js Reducer.js
Actions.js //定义Action函数,当有数据改变时,就产生了一个action,携带着新的payload和之前的type var actionFunc = function(action){
return {
type:action.type,
payload:action.payload
}
}
export default actionFunc ActionTypes.js //定义action的类型,根据类型返回不同的state export const ACTTYPE1 = 'add1'
export const ACTTYPE2 = 'add2' Store.js //用来初始化state数据(默认空),并将reducer和state绑定到store上 import {createstore} from 'redux'
import reducer from './Reducer.js'
var state = {
type:'',
payload:''
}
var store = createstore(reducer,state)
export default store Reducer.js //通过action返回不同的数据, import * as actionTypes from './ActionTypes.js'
export default {(state,action)=>{
switch (action.type) {
case actionTypes.ACTTYPE1 :
return {...state, payload : action.payload} //将state展开,然后再添加一个payload属性,用来覆盖之前的payload属性
case actionTypes.ACTTYPE2 :
return {...state, payload : action.payload}
default :
{...state}
}
}}
4.在需要改变 state 数据的组件上,引入 connect 并定义两个函数,并将定义的 Action 和 ActionTypes 引入
1.定义 mapStateToProps 和 mapDispatchToProps 两个函数。前一个是用来将 state 映射到this.props上的(就是映射到该组件上),后一个是将dispatch映射到组件上的。
2.引入 Action 和 ActionTypes 是为了调用Action函数,而Action函数创建了一个Action,调用Action函数的时候会传值,传的值就是action的值。 然后通过action修改state的数据
3.使用connect链接两个函数和组件,并暴露
export default connect( mapStateToProps , mapDispatchToProps )(Zujian)
4.mapStateToProps
const mapStateToProps = function(state , ownProps){
return {
text : state.text //将state中定义的数据(text)返回到props上。这样在类中就能通过this.props.text访问到state中的数据
}
}
const mapDispatchToProps = function(dispatch , ownProps){
return {
funcname : (text)=>{ //返回一个方法到props上,这样就可以通过this.props.funcname( 'tt' )调用这个方法,并调用dispatch
dispatch( Action.action1( { type : action1type , payload : 'sunny' } ) ) //调用dispatch 创建一个action,并修改state
}
}
}
5.在需要显示store中的数据的组件上也要定义 mapStateToProps 和 mapDispatchToProps 两个函数,并用connect链接。mapDispatchToProps 中的返回内容可以为空对象。