- 通过
createStore创建store - 在创建
store时需传入纯函数reducer reducer接收两个参数：state和action- 在需要用到redux的组件中引入
store - 编写改变状态的方法，通过
store.dispatch()方法来派发action - 被派发的
action会转发给reducer，reducer会通过action来更新state - 组件可以通过
store.getState()方法来获取状态 - 通过
store.subscribe()方法来订阅state的更新，每次状态改变都会触发回调事件
用到redux的组件
import React, { Component } from 'react'
import store from "../store"
export class ReduxPage extends Component {
componentDidMount() {
store.subscribe(() => {
this.forceUpdate()
})
}
add = () => {
store.dispatch({type: "ADD", payload: 100})
}
render() {
return (
<div>
<h3>ReduxPage</h3>
<div>{store.getState()}</div>
<button onClick={this.add}>add</button>
</div>
)
}
}
export default ReduxPage创建store和reducer
import { createStore } from "../kredux";
const reducer = (state = 0, { type, payload }) => {
switch (type) {
case "ADD":
return state + payload
default:
return state
}
};
const store = createStore(reducer);
export default store;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent