什么是Reducer？
reducer就是一个纯函数，接收旧的 state 和 action，返回新的state
之所以将这样的函数称之为 reducer，是因为这种函数与被传入 Array.prototype.reduce(reducer, ?initialValue) 里的回调函数属于相同的类型。保持 reducer 纯净非常重要。永远不要在 reducer里做这些操作：
什么是reduce
const array1 = [1, 2, 3, 4]; // 类似累加：accumulator为total，currentValue为当前value const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15
函数聚合
function f1() { console.log("f1"); } function f2() { console.log("f2"); } function f3() { console.log("f3"); }
现在想输出 ： f1 f2 f3
方法1：f1();f2();f3();
方法2：f3(f2(f1()))
方法3：
function compose(...funcs){ const len = funcs.length if(len === 0) return arg => arg if(len === 1) return funcs[0] return funcs.reduce((left, right)=>(...args)=>right(left(...args))) } compose(f1,f2,f3)()
import {createStore} from ‘redux‘;
function counterReducer(state=0, action){
// console.log(state);
switch (action.type){
case "add":
return state + 1
default:
return state
}
}
const store = createStore(counterReducer)
export default store
创建 ReduxPage
import React, {Component} from ‘react‘
import store from ‘../store/reduxStore‘;
export default class ReduxPage extends Component {
componentDidMount(){
store.subscribe(()=>{
// console.log(‘subscribe‘);
// this.forceUpdate()
this.setState({})
})
}
render() {
// console.log(‘ReduxPage‘, store);
return (
<div>
<h1>ReduxPage</h1>
<p>counter:{store.getState()}</p>
<button onClick={() => store.dispatch({type: ‘add‘})}>add</button>
</div>
)
}
}
1、createStore 创建 store
2、reducer 初始化、修改状态函数
3、getState 获取状态值
4、dispatch 提交更新
5、subscribe 变更订阅
每次都重新调用 render 和 getState 太low了，想用更react的方式来写，需要react-redux的支持
npm install react-redux --save
提供了两个api
1、Provider 为后代组件提供store
2、connect 为组件提供数据和变更方法
全局提供store，index.js
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import ‘./index.css‘; import App from ‘./App‘; import store from ‘./store/reactReduxStore‘; import {Provider} from ‘react-redux‘; ReactDOM.render( <Provider store={store}> <App /> </Provider> , document.getElementById(‘root‘));
reactReduxStore.js
import {createStore} from ‘redux‘;
function counterReducer(state=0, action){
// console.log(state);
switch (action.type){
case "add":
return state + 1
case "minus":
return state - 1
default:
return state
}
}
const store = createStore(counterReducer)
export default store
ReactReduxPage.js
import React, { Component } from ‘react‘
import {connect} from ‘react-redux‘;
class ReactReduxPage extends Component {
render() {
console.log(this.props);
const {counter, add, minus} = this.props
return (
<div>
<h1>ReactReduxPage</h1>
<p>counter:{counter}</p>
<button onClick={add}>add</button>
<button onClick={minus}>minus</button>
</div>
)
}
}
export default connect(
// mapStateToProps
state=>{
return {counter: state}
},
// mapDispatchToProps
{
add: ()=>{
return {
type: ‘add‘
}
},
minus: ()=>{
return {
type: ‘minus‘
}
}
}
)(ReactReduxPage)
原文：https://www.cnblogs.com/haishen/p/11699583.html