准备工作
首先创建一个login的文件夹,其中含有入口文件和store的文件
这里正式开始啦!
思路:首先先要写一个三元判断,判断当reducer中数据是false或者true的时候应该显示的内容,并且获取reducer中的默认数据,然后绑定一个点击事件,当点击时去派发action然后通过reducer更改数据,这样就可以啦!!!
那么首先我们写一个判断
{
this.props.login ? <div>退出</div> : <div>登录</div>
}
顺便使用connect中的mapStateToProps去获取数据(这里我已经使用了immutable,所以需要下载安装immutable,这里我就不多说啦,大家可以自行查阅immutable对象)
const mapStateToProps = (state) => {
return {
login: state.getIn(["login","login"])
}
}
在reducer.js中写默认的login数据(同样这里使用了immutable中的fromJS,如果没有下载就用fromJS会报错哦)
const defaultState = fromJS({
login:false
})
到这里,如果我们更改login的数据在页面上就会呈现不一样的效果,那么接下来就是如何自动更改reducer中的数据了!
想要改变store中的数据,就一定要走一个派发action的流程,下面就开始正式派发啦!
首先需要点击的时候去改变状态,那么就需要在登录上绑定一个点击事件,
{
this.props.login ? <div>退出</div> : <div onClick={this.props.changeState}>登录</div>
}
然后将绑定的方法写在mapDispatchToProps中,派发action传递给store(这里我创建了一个actionCreators的文件夹,所以需要在头部引入这个)
//顶部引入
import {actionCreators} from "./store";
const mapDispatchToProps = (dispatch) => ({
changeState(){
dispatch(actionCreators.changeState())
}
})
现在转到actionCreators这个目录下(这里引入了actionTypes 所以需要引入)
import * as actionTypes from "./actionTypes";
//在这里定义action,然后通过匹配type在reducer中执行更改state的值
const changeLogin = () => ({
type:actionTypes.CHANGE_STATE,
value:true
})
export const changeState = () => {
return(dispatch) => {
dispatch(changeLogin())
}
}
在actionTypes.js中定义type的常量
export const CHANGE_STATE = 'login/CHANGE_STATE'
最后在reducer.js中就可以通过type来更改值了
import {fromJS} from 'immutable'
import * as actionTypes from "./actionTypes";
const defaultState = fromJS({
login:false
})
export default (state = defaultState,action) => {
//这里通过判断type值去更改state的状态
if(action.type === actionTypes.CHANGE_STATE){
return state.set('login',action.value)
}
return state
}
到这里就完成了点击更改状态啦!