redux

最新推荐文章于 2022-12-17 12:40:48 发布

cloudgaps

最新推荐文章于 2022-12-17 12:40:48 发布

阅读量73

点赞数

分类专栏：学习笔记文章标签： react

本文链接：https://blog.csdn.net/cloudgaps/article/details/117572478

版权

学习笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了Redux的基础概念和工作流程，包括如何定义action、reducer以及创建store。通过一个简单的例子展示了如何在React应用中触发action并更新状态，以及如何订阅store获取数据变化。这是一篇适合初学者理解Redux架构的教程。

摘要由CSDN通过智能技术生成

1.定义action

必须有type属性， action用来表明将要更新数据

const sendAction = () => {
    return {
        type : 'send-type ',
        value: '我是一个被传递的value'
    }
}

module.exports = {
    sendAction
}

2.定义reducer

通过判断action中type属性来判断对数据进行怎样的操作

const initState = {
    value: '我是默认的value'
}

const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'send-type':
            return Object.assign({}, state, action)
        default:
           return state
    }
}

module.exports = {
    reducer
}

3.创建store

联系action和reducer

import { createStore } from 'redux'
// 导入创建好的reducer
import { reducer } from '../reducer/reducer'

// 创建我们自己的store 当调用store.dispatch时 action就会传递到reducer里来
const store = createStore(reducer)

export default store

4.使用

import React from 'react'
import store from '../src/store/store'
import {sendAction} from '../src/action/action'

class APP extends React.Component {


    handleClick= ()=> {
        const action = sendAction
        store.dispatch(action)
    }
    // 页面一触发就拿到数据 subscribe监听数据 参数是一个回调函数， getState拿到数据
    componentDidMount() {
        store.subscribe(()=>{
            console.log(store.getState());
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>发送action</button>
            </div>
        )
    }
}

export default APP