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}