首页 > 其他 > 详细

Redux使用总结

时间:2020-05-22 09:07:57      阅读:56      评论:0      收藏:0      [点我收藏+]

redux核心概念

store: 状态仓库,存放所有状态(很懒,只负责数据存取不负责计算)
reducer: 计算者,根据action类型,计算并返回最新状态给store
action: 通知,改变store内值唯一的方式

下载及安装

yarn add redux -D
yarn add react-redux -D

在项目内增加redux管理项目状态

  1. 创建redux必备3文件(redux架构), store.js actions.js reducers.js
    创建 [ store.js ] [ reducers.js ] [ actions.js ] (内容可以先空,具体业务在来补充)

store.js

//1. 引入createStore
//2. 创建store并导出
import { createStore } from ‘redux‘
import reducers from ‘./reducers‘

export default createStore(reducers)

reducers.js

//1. 引入combineReducers
//2. 定义个小状态对应的reducer
//3. 使用combineReducers 合并小状态并导出
import { combineReducers } from ‘redux‘

//创建测试临时状态,正式使用时删除  从actions.js 获取到type命令 对应改变状态
function getActiveVal(state = ‘默认值‘ , action){
    switch(action.type){
        case ‘TYPE值‘: return action.val //新增store处理
        default: return state
    }
}

export default combineReducers({
    //key(状态名) : value(此状态对应的reducer)
    getActiveVal
})

actions.js

//改变 getActiveVal 状态的值
export function setVal(key){
    return {
        type: ‘TYPE值‘, // 传给 reducers.js  命令
        key      // 修改的状态数据
    }
}

在入口文件中 / 在顶级组件引入store和Provider组件,绑定Provider和store状态

//引入store(reudx状态机)
import store from ‘./store/store‘
//引入Provider中间容器,连接store和自己的组件
import { Provider } from ‘react-redux‘

<Provider store={store}>
    //内部所有子组件都能共享使用store的状态值
    //这里不要忘记,把自己的组件塞到Provider内
    <MainRouter />
</Provider>

3. 在子组件内,使用store的状态值

3.1 引入connect函数
    import { connect } from ‘react-redux‘

3.2 书写filter函数具体内容,并真正注入数据
    //过滤store数据,并注入到当前组件内,中间件会把完整的store注入到此函数内
    function filter(store){
        console.log(store)
        //返回需要的数据(这里返回的数据会被自动注入到当前组件的props上)
        return {
            //key(状态名): value(状态值)
            test: store.test
        }
    }

3.3 在组件导出时,使用connect注入数据
    export default connect(filter)(Recommend)

4. 在组件内使用注入的状态机状态

//所有filter函数返回的数据,都会注入到当前组件的props上
this.props.注入的状态名
this.props.test

5. 在组件内修改状态机内的状态

//发送action是唯一改变store状态的途径
5.1 在actions.js内,创建对应action对象,并导出
    //改变test状态的值
    export function changeTest(val){
        return {
            type: ‘CHANGE_TEST‘,
            val
        }
    }

5.2 在reducers.js内,增加对应的状态处理case
//创建测试临时状态,正式使用时删除
function test(state = ‘testVal‘, action){
    switch(action.type){
        case ‘CHANGE_TEST‘: return action.val //新增store处理

        default: return state
    }
}

5.3 引入对应action对象,
    使用this.props.dispatch() 发送action对象,让状态机改变状态
    import { changeTest } from ‘../../store/actions‘
    this.props.dispatch(changeTest(‘新的值‘))

注意!!

使用HashRouter进行前端跳转记录!!!
不要使用Browser路由,因为这个是服务器记录信息的路由



作者:杨杰灬
链接:https://www.jianshu.com/p/b1ba3b7f9df0
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Redux使用总结

原文:https://www.cnblogs.com/lan-cheng/p/12934567.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!