react中使用redux简易案例讲解
为什么我想要使用redux？
前段时间初步上手了react，最近在使用react的过程中发现对于组件之间通信的需求比较迫切，尤其是在axios异步请求后端数据的时候，这样的需求是特别强烈的！举个例子：
// 厂家报告到货 class ReportArrivalGoods extends React.Component{ constructor(props){ super(props); this.state = { columns:tableHead.ReportArrivalGoods,//这里是初始化的表头，内容较多，不显示出来了 data: [] }; }componentDidMount(){ axios( { method: 'get', url: 'http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods' }) .then( res => { this.setState( data:NewState ); } ) .catch( error => { console.log(error); } ); }
render(){ return( <Table style={{width: '100%'}} columns={this.state.columns} data={this.state.data} border={true} maxHeight={tableMaxHeight} /> ); } }
我们聚焦于下面的componentDidMount（）函数
componentDidMount(){ axios( { method: 'get', url: 'http://172. 15d8 89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods' }) .then( res => { this.setState( data:NewState ); } ) .catch( error => { console.log(error); } ); }这是大家都很熟悉的react生命周期钩子函数，我做了这样一件事：页面渲染完向后台请求数据并显示到页面上。但是用过axios的都知道，他跟ajax一样，都是异步的，也就说，你发处请求后就会立即执行后面的代码了，等你请求结果回来了才会执行then()和catch()。一开始我简单粗暴的直接把整个函数体写进了钩子中，实现是没问题了，可是要使用钩子函数请求不同数据的组件有5个，要是每个组件都写这么一长串代码，一方面不好看，另一方面重复代码太多了。于是我想到了把这段函数体封装起来，于是就有下面的代码
//webservice数据请求函数
function AxiosGet(desinationURL){
axios(
{
method: 'get',
url: desinationURL
})
.then(
res => {
);
}
)
.catch(
error => {
console.log(error);
}
);
}
可是要是封装了怎么设置我组件的state呢？机智的我想到了个办法，在组件内部创建一个带参函数modifyState()，在使AxiosGet（）函数时将modifyState（）函数作为参数传入AxiosGet（）并在AxiosGet（）内部将res.data作为参数传modifyState（）从而达到setstate的目的。说起来有点绕，用代码说话
//webservice数据请求函数
function AxiosGet(desinationURL,ApplyNewState){
axios(
{
method: 'get',
url: desinationURL
})
.then(
res => {
ApplyNewState(res.data);
}
)
.catch(
error => {
console.log(error);
}
);
}
上面是组件外部的数据请求函数，下面的是组件内部的钩子函数和用于传入获取数据的函数
modifyState(NewState){
this.setState(
{
data:NewState
}
);
}
componentDidMount(){
AxiosGet('http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods',
this.modifyState
);
}
恩，明眼人应该已经看懂了，我巧妙的通过在组件内部将函数传出的方式完成了state的更新，问题虽然解决了，但是这样操作着实麻烦，要是能在组件外部更新组件的state就好了。有人要说了，状态提升啊！为所有的组件创建一个父组件，在父组件中统一更新状态并通过props的形式传入子组件。恩，这确实是个办法，但是父组件就没有表达出了特别的意思了，就好像div一样，没有语义化，有没有更好的方式呢？百度搜搜react的state，来了来了，他来了，灯灯灯灯！redux闪亮登场！
Redux使用七步走
此处对于redux的知识不做讲解了，我懂得也就那样，redux官网上教程很清晰，可以直接过去学，我主要讲讲redux在react中的使用。如标题所说，只需要七步。众所周知，在redux中，最重要的东西就三个
{
动作：action，
动作处理函数：reducer，
状态仓库：store
}
想必redux官方教程过了一遍的人都能轻松理清其中关系与具体运行吧，那么问题来了，怎么在react中把组件们的state和store给他绑定上呢？网上帖子一大堆，但是跟我之前那篇中说的一样，抄来抄去，没有真正讲到小白的点子上，有的还抄错了导致读者误解，这里我从小白视角做出最贴切的讲解，相信大家听完手敲一遍也就懂了。我是用create-react-app搭建的开发环境，这里不做赘述。话不多说，上代码！目录结构如图所示：
第一步：安装依赖：
npm i redux redux-react -s
第二步：创建action
576
// /actions/test.js
export const PLUS='PLUS';
export function plusActionCreator(){
return{
type:PLUS
}
}
第三步：创建reducer
// /reducers/test.js
import {PLUS} from '../actions/test'
const initState={count:0};
export function plusReducer(state=initState,action){
switch(action.type){
case PLUS:{
return
{
count:state.count+1;//此处返回的state只是plusReducer这个小范围内的state，理解这一点很重要！！！
}
}
default:return state;
}
}
第四步：创建store
// /index.js
const reducer=combineReducers({plus:plusReducer});//这里需要传入json对象才行，对象名代表来自哪个reducer var store=createStore(reducer);
上面是redux部分，大家应该很熟悉了，此时也到了最重要的部分：react和redux的结合。需要说明一下，react的组件我们现在分为展示组件和容器组件两类，展示组件负责界面呈现，容器组件负责为展示组件管理state。展示组件的所有state通过props传入。
第五步：创建展示组件
// /index.js
function Test (props){
return(
<div>
<p>总计数：{props.count}</p>
<button onClick={props.plus}>加一</button>
</div>
);
}
第六步：通过react-redux提供的connect方法生成容器组件
// /index.js
const CollectionComponent=connect(
(state)=>{
return{
count:state.plus.count//这里需要注意，各个小版块的state是通过combinereducers中命名的json对象名做了分隔的
//此处的json对象count与展示组件中的props.count是对应关系
}
},
(dispatch)=>{
return{
plus:bindActionCreators(plusActionCreator,dispatch)
//此处的json对象plus与展示组件中的props.plus方法也是对应关系
} } )(Test);//此处的Test与展示组件名也是对应关系
这里很关键，首先const CollectionComponent，这个CollectionComponent就是我们所需要的容器组件。
connect（read,write）(destination)函数有三个参数read、write和destionation（抽象名，为了方便理解这么叫）,read的目的就是从store中返回我们要的state，write的目的是传入action来更新state，destination用来绑定到指定的展示组件。
第七步：通过react-redux提供的Provider组件搭建react和redux数据交互的桥梁
// /index.js
ReactDOM.render( <Provider store={store}>//这里把之前创建的store传给Provider，这样store中的state就能传达到容器组件中了 <CollectionComponent/>//由于第六步忠已经把展示组件绑定到了容器组件上了，所以此处只需写容器组件即可 </Provider> ,document.getElementById('root'));
OVER！通过这个小demo即可完成一个简单的累加器。最后贴上完整源码，嘿嘿嘿，yes!
// /reducers/test.js
import {PLUS} from '../actions/test'
const initState={count:0};
export function plusReducer(state=initState,action){
switch(action.type){
case PLUS:{
return {
count:state.count+1
}
}
default:return state;
}
}
// /actions/test.js
export const PLUS='PLUS';
export function plusActionCreator(){
return{
type:PLUS
}
}
// /index.js
//react
import React from 'react'
import ReactDOM from 'react-dom'
//redux
import {connect,Provider} from 'react-redux'
import {bindActionCreators,combineReducers,createStore} from 'redux'
import {plusReducer} from './reducers/test'
import {plusActionCreator} from './actions/test'
//呈现部分
function Test (props){
return(
<div>
<p>这里是count：{props.count}</p>
<button onClick={props.plus}>加一</button>
</div>
);
}
//redux部分
const reducer=combineReducers({plus:plusReducer});//这里需要传入json对象才行
var store=createStore(reducer);
const CollectionComponent=connect(
(state)=>{
return{
count:state.plus.count//这里需要注意，各个小版块的state是
//通过combinereducers中命名的json对象名做了分隔的
}
},
(dispatch)=>{
return{
plus:bindActionCreators(plusActionCreator,dispatch)
}
}
)(Test);
ReactDOM.render(
<Provider store={store}>
<CollectionComponent/>
</Provider>
,document.getElementById('root'));
最后再给个小彩蛋吧，今天刚捣鼓的react-router的小demo，也是嵌套在上面的代码中的。
//react
import React from 'react'
import ReactDOM from 'react-dom'
//redux
import {connect,Provider} from 'react-redux'
import {bindActionCreators,combineReducers,createStore} from 'redux'
import {plusReducer} from './reducers/test'
import {plusActionCreator} from './actions/test'
//router
import { BrowserRouter,Switch,Route,NavLink } from 'react-router-dom';
//呈现部分
function Test (props){
return(
<div>
<p>这里是count：{props.count}</p>
<button onClick={props.plus}>加一</button>
</div>
);
}
//redux部分
const reducer=combineReducers({plus:plusReducer});//这里需要传入json对象才行
var store=createStore(reducer);
const CollectionComponent=connect(
(state)=>{
return{
count:state.plus.count//这里需要注意，各个小版块的state是
//通过combinereducers中命名的json对象名做了分隔的
}
},
(dispatch)=>{
return{
plus:bindActionCreators(plusActionCreator,dispatch)
}
}
)(Test);
ReactDOM.render(
<Provider store={store}>
<BrowserRouter >
<Switch>
<Route path="/class/classmates">
<div>QianYingLi,HaoWu,ZhouHuiFan</div>
<NavLink to="/class" activeClassName="fillInClassNameHere">
redirect to class
</NavLink>
</Route>
<Route path="/class">
<div>高一二</div>
<NavLink to="/class/classmates" activeClassName="hurray">
redirect to classmates
</NavLink>
</Route>
<Route path="/">
<CollectionComponent/>
</Route>
</Switch>
</BrowserRouter >
</Provider>
,document.getElementById('root'));
- React ( redux 的使用流程及简单的案例 ,redux的数据划分使用,以及react-redux,react-thunk的使用)
- react-redux的使用从action规划到reducer实现及完整案例
- 优雅的在React项目中使用Redux
- 实例讲解react+react-router+redux
- react之redux的使用笔记
- React-redux实现小案例（todolist）的过程
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之四--组织机构管理源码分享
- 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
- 使用React + Redux + React-router构建可扩展的前端应用
- react-redux中connect使用装饰器的方式写
- 今天开始学习React，todo-list的实现、项目初始化、react-redux的使用
- React/Redux应用使用Async/Await
- 在React-Native中使用redux
- React第三方组件5(状态管理之Redux的使用④TodoList下)
- redux与react联合使用
- 什么是React-redux、为什么使用React-redux、怎么使用React-redux
- 实例讲解基于 React+Redux 的前端开发流程
- 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
- Redux 17 - 进阶：和React Router一起使用（Usage with React Router）
- 结合React使用Redux