redux入门指南
前言:大概一个月没有写博客了,这两天正好是周末,就写点东西来梳理下之前几个月的所写与所得;
两个月前,学习了一下 redux ,还是一点难度的,花了我一天的时间来搞明白他,
但是都没怎么记录,今天这篇博客就是用一个demo来介绍 redux , react-redux , react-thunk 的简单用法;
首先就是下载,使用命令:
npm install --save redux react-redux react-thunk
下好后 npm start 启动;
文件夹列表如下:
redux 的最关键的函数就是 dispatch !
而 dispatch 的本质是什么呢?
dispatch 接受的是一个对象,这个对象至少有一个是键值是用来判断类型的,其余的可以是任意的;
而他(其实也就是 reducer 函数)他本身有一个 state ,用来存储初始值,根据接受到的对象中的类型键值来判断对于当前值的不同操作,
而且他必须返回修改后的 state;
现在我们创建好文件后修改 src/index.js::
import { createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import calcul from './redux/reducer';
let store = createStore(calcul,applyMiddleware(thunk));
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
上部的代码中除了 reactDOM.render 是修改的,其他都是新添加的;
这里我们是引用了 redux, redux-thunk, react-redux模块和一个 reducer 文件;
讲一下 createStore 的作用,他在官方文档中的释义是这样的:
创建一个 Redux store 来以存放应用中所有的 state。
应用中应有且仅有一个 store。
其实这只是一个声明赋值,而如果你不用中间件(thunk)可以这样写:
let store = createStore(calcul);
一下子简单了很多;
而 Provider 这个html的标签就是将 redux 的值和函数,传递给整个项目;
上面说到了 create那我们先创建 reducer/index.js:
import { combineReducers } from 'redux'
const countReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + action.data;
case 'DECREMENT': return state - action.data;
default: return state;
}
};
const calcul = combineReducers({
countReducer
});
export default calcul;
combineReducers 是一个语法糖:他的作用就是将多个reducer函数合并成一个对象;
上面的 countReducer 就是一个reducer函数了,就像我上面所说的,action就是接受的那个对象,
而state就是他自带的初始值,通过switch操作,根据 action.type 的值来进行不同的操作,
但是也是最重要的就是必须有返回值;
接下来是修改src/App.js:
import React, { Component } from 'react';
import {connect} from 'react-redux';
import Calculation from './components/calculation';
class App extends Component {
render() {
const {dispatch,countNum} = this.props;
return (
<div className="App">
<Calculation getValue={countNum} dispatch={dispatch}></Calculation>
</div>
);
}
}
function showData(state) {
return {
countNum:state.countReducer
}
}
export default connect(showData)(App);
connect 函数是来自 react-redux 的,他是一个非常重要的函数,
在最下面一行代码中:connect(showData)(App);
第一个接受的是一个对象,在 showData 中, state 就是所有 reducer 的初始值;
通过这个函数将当前的组件与 redux 中的数值挂钩,他返回的是当期组件所需要的 reducer 的值(你也可以对值进行filter),
而第二个接受对象呢,就是当前组件了;
可以看到,我们还引用了一个名为 Calculation 的组件,他接收了来自 redux 的 dispatch , countNum 这两个参数(函数);
在下一个文件是 src/components/calculation.js:
import React, { Component } from 'react';
import {DECREMENT,middleINCRENT} from '../redux/action';
export default class Count extends Component {
constructor(props) {
super(props);
this.state = {
changeVal:1
}
}
input = (e)=>{
this.setState({changeVal: Number(e.target.value)});
};
render() {
let {dispatch,getValue} = this.props;
return <div>
this is calculation
<h1>{getValue}</h1>
<input type="text" onChange={this.input} value={this.state.changeVal} />
<button onClick={() => (dispatch(middleINCRENT(this.state.changeVal)))}>+</button>
<button onClick={() => (dispatch(DECREMENT(this.state.changeVal)))}>-</button>
</div>
}
}
这个文件引用了文件:src/redux/action/index.js里的 DECREMENT , middleINCRENT 两个函数;
其中 middleINCRENT 便是添加了中间件的 action 函数;
这个组件的作用是什么呢:就是根据 input 里的值,来改变 redux 里的 countReducer 的初始值,靠着点击按钮来触发;
dispatch 我先不说,先说下 DECREMENT , middleINCRENT ,而这就不得不提到下面这个文件:
src/redux/action/index.js:
export function INCREMENT(data){
return {
type:'INCREMENT',
data
}
}
export function middleINCRENT(data) {
return (dispatch, getState) => {
const currentValue = getState();
if(currentValue.countReducer >=200){
return false;
}
dispatch(INCREMENT(data));
}
}
export function DECREMENT(data) {
return {
type:'DECREMENT',
data
}
}
现在你们知道中间件的作用了么?他就是在提交值的时候,对值进行统一的判断和修改, 可以在这个地方进行ajax操作;
我们看这个文件里的 INCREMENT 和 DECREMENT 函数,这两个 函数返回的值就是我最开始所说的, dispatch 所接收的值,
可以看到 type 即是判断的类型了,而 data 呢,就是组件 caculation.js 里的 input 的值;
现在看中间件 middleINCRENT 这个函数,他是返回一个函数,而这个函数可以接受到两个参数,一个呢是 dispatch 函数,而另外一个呢是当前的 reducer 函数的值;
通过学习这个组件, redux 的基本流程可以掌握了,当然实际项目中并不会这么简单,但是原理就是这样;
最后我将这个 demo 放在了GitHub: https://github.com/Grewer/reduxDemo
如果帮到了你,还请推荐或者 star;
完;
