Redux入门级别操作演示
2019-05-09 本文已影响2人
废柴码农
简单用redux实现功能如下：
点击左侧导航栏的时候，右侧的header头部相应的显示出左侧的导航栏
WeChat180022874829b3dddf43c62f6d7f750e.png
首先在实现功能之前，需要简单的了解rudux的流程和几个常见的方法
流程图如下：
屏幕快照 2019-05-07 下午5.26.39.png
之前听到一个大佬讲这个的时候把这个流程比喻成借书环节
reactComponent相当于一个借书的人，ActionCreators相当于借书这个动作，Store相当于一个图书管理员，Reducers相当于查阅书记的小本本，好的，下面串起来流程，有一个人想要来借书，他首先说一句我要借书传达给图书管理员，要借很多本，图书管理员需要查看小本本看书籍分别都在那一列哪一行，然后查阅之后在反馈给借书的人。OK流程走完，只要脑子中一直存在这个流程的话，写起来代码会轻松很多
常用方法如下：
store.getState() //获取store中的状态
store.dispatch(action) //将action传给store
store.subscribe() //store将状态传给组件
既然是初级版本的，代码就应该简单易懂，按照这个流程走的话，最重要的部分应该是store，所以npm install redux 安装之后，新建在redux文件夹中，然后在文件夹中创建一个store.js的文件（由于图书管理员离不开小本本，所以，reducer是作为它的参数）
store.js
import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
reducer,
);
export default store;
其次再创建一个reducer.js(reducer有两个默认的参数一个是状态state，另一个是动作action)，一般都给state一个初始值，这样，reducer.js文件就完成了✅
reducer.js
const defaultState = {
titleValue: '首页',
}
//reducer 可以接受state但是不可以修改state 只有store才能改变
export default (state = defaultState, action)=> {
console.log('action',action);
return state;
}
好的，下面正式从组件中走一遍流程
动作的发出者是左边导航组件nav.js
所以在nav.js中代码如下
//在Menu中有一个点击事件，所以代码写在这个方法中
handleClick =({item,key})=> {
const action = {
type: 'action_title',
title: item.props.title
}
store.dispatch(action)
this.setState({
currentKey:key
})
}
render(){
return(
<Menu
mode="vertical"
theme="dark"
selectedKeys={[this.state.currentKey]}
onClick={this.handleClick} //点击事件
>
{this.state.menuTreeNode}
</Menu>
)
}
下面我来解释上面的思路：
在看翻到上面看redux的流程图，组件第一步是有一个动作action，即（上面说的借书动作）所以：
第一步是创建一个action，因为又很多个action，所以要定义一个type区分，title是要在header顶部展示的菜单名称，item.props.title是我项目中获取到的菜单名称，赋值给title
第二步就是传给store，所以用store.dispatch(action)方法传给store更新状态
const action = {
type: 'action_title',
title: item.props.title
}
store.dispatch(action)
由于store状态改变在reducer中是同步的，我刚才在reducer.js中写了一个console.log('action',action);方法，当点击的时候，控制台中会打印变化的action
如下：
屏幕快照 2019-05-09 下午3.40.57.png
这个时候在返回到上面看流程图，reducer接受到状态的改变之后需要传给新的状态给store，所以reducer.js文件需要处理一下数据了
reducer.js
const defaultState = {
titleValue: '首页',
}
//reducer 可以接受state但是不可以修改state 只有store才能改变
export default (state = defaultState, action)=> {
console.log('action',action);
if(action.type === 'action_title'){
const newState = JSON.parse(JSON.stringify(state))
newState.titleValue = action.title //这个时候store中的参数被重新赋值了
return newState
}
return state;
}
由于reducer.js不能直接处理state，所以需要定义新的变量来改变参数值
好的，进行到这一步骤状态改变了怎么传给组件呢？
下面在返回到流程图中看下一步骤，这个时候reducer已经将新的状态传给store，下一步骤就是store将这个状态返回给组件(即图书管理员给借书人说书在哪里)
这个时候就用到了store.subscribe() 这个方法了
显示层是右边的header组件，所以header.js中代码如下：
header.js
//store文件需要import引入
constructor(props){
super(props)
this.state = {
title:store.getState().titleValue
}
store.subscribe(this.handleStoreChange)
}
handleStoreChange =()=> {
this.setState({
title:store.getState().titleValue //将store中的值赋给title
})
}
store.subscribe()写在 constructor中，同步store的状态
