react如何点击更改数据。

准备工作
首先创建一个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
}

到这里就完成了点击更改状态啦!

发布了23 篇原创文章 · 获赞 1 · 访问量 482

猜你喜欢

转载自blog.csdn.net/mini74/article/details/105225564