带你快速上手Redux

2020年12月14日 15:48 · 阅读 68

redux是什么

官方解释：Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的一种可预测的状态容器

redux的工作流程

通过redux实现一个累加操作

安装redux

yarn add redux
复制代码

通过createStore创建store

import { createStore } from 'redux'
//实现一个reducer 修改状态函数
export const countReducer=(state=0,{type,payload=1})=>{
    switch(type){
        case 'ADD':
            return state+payload
        default:
            return state
    }
}
const store=createStore(countReducer)
export default store
复制代码

使用redux

//创建ReducxPage页面
import React, { Component } from 'react'
import store from '../store/store'
export default class ReduxPage extends Component {
    componentDidMount(){
        //变更订阅
        store.subscribe(()=>{
            this.forceUpdate()
        })
    }
    add=()=>{
        //执行action 进行更新
        store.dispatch({
            type:'ADD',
            payload:100
        })
    }
    render() {
        return (
            <div>
                <p>ReduxPage</p>
                <div>
                    {/* 获取state */}
                    {store.getState()}
                </div>
                <button onClick={this.add}>点击+</button>
            </div>
        )
    }
}
复制代码

自己实现一个createStore

手动创建store

//创建一个redux/createStore.js.js
export default function createStore(reducer) {
    let initState;
    let currentListener=[]
    function getState(){
        return initState
    }
    function dispatch(action){
        initState=reducer(initState,action)
        //更改值之后进行订阅
        currentListener.forEach(listener=>listener())
    }
    //接收一个监听函数
    function subscribe(listener){
        currentListener.push(listener)
    }
    return {
        getState,
        dispatch,
        subscribe
    }
}
复制代码

这里有个注意点：引入官方redux的时候初始值是存在的，当引入我们自己实现的redux的时候初始值没有

官方实现

自己实现

所以在初始的时候调用一次dispatch

 //在createStore.js中调用一次
 //解决没有初始值问题
 dispatch({type:'REDUX/AAAAAAAAAAAAAA'});
复制代码

导出createStore

//创建一个redux/index.js
import createStore from './createStore'
export {createStore}
复制代码