redux
// 安装
npm install react-redux redux redux-logger redux-promise redux-thunk
使用redux
- index.js
// 引入redux
improt {
createStort
}
from 'redux'
// 创建公共容器 reducer是管理员
const initialState = {
title: '好好学习,天天向上',
supNum: 0,
oppNum: 0
}
function reducer(state = initialState, action) {
/* state: 原始容器中的状态 (初始容器没有状态,我们给其赋值默认指 {})
* action: 组件内基于dispatch派发的任务对象(要求对象中必须有type属性,因为我们需要基于type判断派发任务,从而修改不同的公共状态信息)
*/
// 为了防止state和原始容器状态共用同一个堆内存,我们需要把器深克隆
state = JSON.parse(JSON.stringify(state))
switch(action.type){
case 'SUPPORT': // 匹配行为标识
state.supNum += action.payload
break;
case 'SUPPORT': // 匹配行为标识
state.supNum += action.payload
break;
}
return state; // => return 的是啥,相当于把原始容器中的状态修改为啥
}
const store = createStort(reducer)
// 笨方法使用redux
ReactDOM.render(
<>
<App store={store} />
</>,
document.getElementById('root')
);
2.App.js 获取store公共信息(笨方法)
import react from 'react'
class App extends react.Component{
render() {
// 基于stort.getState()获取公共状态信息
const store = this.props.state
let {title, supNum, oppNum} = store.getState()
return (
<ul>
<li>{title}</li>
<li>{supNum}</li>
<li>{oppNum}</li>
</ul>
)
}
// 把当前组件重新渲染的方法加到store的事件队列中,当容器中的状态改变时,会通知事件执行。从而达到状态更新,=> 所用组件也会重新渲染
componentDidMounte() {
const stort = this.props.state;
const unsubscribe = stort.subscribe(){
// 强制渲染组件
this.forceUpddate()
}
// => 执行stort.subscribe 返回unsubscribe这个函数, 函数执行把之前的事件池内追加的这个方法从事件池内移除掉
// unsubscribe()
}
}
export default App;
2.1.App.js 获取store公共信息(简单的方法)
import react from 'react'
class App extends react.Component{
constructor(props){
super(props)
// => 把公共状态信息赋值给当前组件私有状态信息(这样后期可以根据需求玩自己的状态而不影响公共的)
const { store} = this.props
cosnt {supNum, oppNum} = stort.getState()
this.state = {
supNum:supNum,
oppNum:oppNum
}
}
render() {
return (
<ul>
<li>{this.state.supNum}</li>
<li>{this.state.supNum}</li>
</ul>
)
// 当信息变化,更新组件状态
componentDidMount(){
const {store} = this.props
stort.subscrobe(() => {
// 优化: redux的漏洞,不论改变的当前组件是否用到,只要通知事件池中的执行,当前组件加进去的重新渲染的方法
const {supNum, oppNum} = store.getState();
// 判断当前是否改变了才改变状态,没有改变就改变
if(supNum != this.state.supNum){
this.setState({
supNum: supNum
})
}
if(supNum != this.state.supNum){
this.setState({
supNum: supNum
})
}
// setState的同步和异步性
})
}
}
}
export default App;
3.修改redux内的值
import react from 'react'
class Test extends react.Component{
render() {
return (
<buttom onClick={this.handle.bind(this,0)}></buttom>
<buttom onClick={this.handle.bind(this,1)}></buttom>
}
handle = time => {
// 获取redux的值
const {store} = this.props
if(time === 0){
// 派发行为对象到reducer (最上面)
store.dispatch({
type: 'SUPPORT', // 状态标识
payload: 20 // 值
})
}
store.dispatch({
type: 'SUPPORT', // 状态标识
payload: 20 // 值
})
}
}
export defaulr Test
redux使用工程化
1.src文件夹内创建store文件夹
2.storen内创建action.type的宏管理
- action-type.js
export const VOTE_SUPPORT = 'VOTE_SUPPORT'
export const VOTE_REDUCING = 'VOTE_REDUCING'
3.在storen创建reducer文件夹
- reducer
- index.js / 大reducer
// 合并reducer import {combineReducers} from ’redux‘ import userReducer from './userReducer' import setReducer from './setReducer' const reducer = combineReducers({ user: userReducer, set: setReducer }) export default reducer // 以后通过 stort.getState()user.supNum 来获取对应的模块值
- user.js / 小reducer
// 小reducer 模板 import * as TYPES from '/action-types' const initialState = { } export default function voteReducer(state = initialState, action){ state = JSON.parse(JSON.stringify(state)) switch(action.type){ case TYPES.VOTE_SUPPORT: // 匹配行为标识 state.supNum += action.payload break; } return state; // => return 的是啥,相当于把原始容器中的状态修改为啥 }
4:创建store / src/store(下的)/index.js
import {createStore} from 'redux'
import reducer from './reducers/index'
const stort = createStore(reducer)
export default stort;
5:模块化事件派发 store下创建actions文件夹
- index.js / 大模块合并
// 合并每个模块下的action
import butac from './but'
const action = {
butac
}
export default action
- useraction.js / 小模块
import * as TYPES from '../action-type'
const useraction = {
support(item) {
console.log(item)
return {
type: TYPES.VOTE_SUPPORT,
payload: item
}
},
reducing(item) {
console.log(item)
return {
type: TYPES.VOTE_REDUCING,
payload: item
}
}
}
export default useraction;
- 使用action
import React from 'react'
// redux action
import action from '../store/actions/index';
class But extends React.Component {
render() {
return (
<div>
<button onClick={this.handle.bind(this, 0)}>+</button>
<button onClick={this.handle.bind(this, 1)}>-</button>
</div>
)
}
handle = item => {
// 获取redux的值
const { store } = this.props
if (item === 0) {
store.dispatch(action.butac.support(1))
console.log('加')
} else {
store.dispatch(action.butac.reducing(1))
console.log('减')
}
}
}
export default But;
6:使用redux
import store from './stort/index'
ReactDOM.render(
<>
<App store={store} />
</>,
document.getElementById('root')
);