react闲谈——10分钟学会react-redux异步

2017-01-11 15:24:31来源:segmentfault作者:hyy1115人点击

你可以结合这份redux官方的异步源码来看:Redux Async Example


一、选择一种你喜欢的异步方案,fetch,jQuery,或者是我正在使用的axios
1、安装axios插件


npm i --save-dev axios

2、新建一个fetchData.js文件,封装基本的post和get接口。axios官方还提供了很多配置选项,比如超时配置等。


import axios from 'axios'
//BASE_URL是默认的url地址,如果你安装了webpack,可以在webpack配置全局变量
axios.defaults.baseURL = BASE_URL;
/*
如果没有安装webpack,就使用下面这种写法
axios.defaults.baseURL = http://ip:端口
*/export const getData = (url, param) => {
return (
axios.get(`${url}`)
)
}export const postData = (url, param) => {
return (
axios.post(`${url}`, param)
)
}

3、你的异步代码将写在action。


//导入fetchData文件
import { getData, postData } from './fetchData'//返回一个action对象,用来关联对应的reducer,将data保存到store。
const saveReducer = (data) => ({
type: 'SAVE_REDUCER',
data
})//get接口测试,传入一个参数id,请求/test/:id接口,返回response并且将数据通过指定的action保存到store。
export const getTest = (id) => async (dispatch, getState) => {
try {
let response = await getData(`/test/${id}`)
await dispatch(saveReducer(response.data))
} catch (error) {
console.log('error: ', error)
}
}/*
post接口测试,params参数格式
let params = {
id: 23
}
*/
export const postTest = (params) => async (dispatch, getState) => {
try {
let response = await postData(`/test`, params)
await dispatch(saveReducer(response.data))
} catch (error) {
console.log('error: ', error)
}
}

4、在reducer中定义action type保存data。


//注意,这里不需要再import action了。
//定义一个初始化状态的state,假设现在有一个空数组testData
let initState = {
testData: []
}//定义一个叫做test的reducer,更新state。
export function test(state = initState, action) {
switch (action.type) {
case 'SAVE_REDUCER':
return {
...state,
testData: action.data
}default:
return state;
}
}

5、现在你还需要定义一个store的配置文件,把reducer合并成store,并且关联action。

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers';let createStoreWithMiddleware;
// store负责管理所有reducer,module.hot.accept表示支持热更新
const logger = createLogger({ collapsed: true });
createStoreWithMiddleware = applyMiddleware(
thunkMiddleware,
logger
)(createStore);export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
if (module.hot) {
module.hot.accept('./reducers', () => {
const nextRootReducer = require('./reducers/index');
store.replaceReducer(nextRootReducer);
});
}
return store;
}

6、单向数据流部分现在已经完成了,接着就在组件触发action去异步请求服务器的数据,返回给前端,然后action会自动把数据保存到内存store中。


import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';/*actions*/
import * as testActions from 'action/test';//让组件关联state和action
@connect(
state => state,
dispatch => bindActionCreators({testActions}, dispatch)
)
export default class Home extends React.Component {constructor(props) {
super(props);
}componentWillMount() {
let params = {
id: 23
}
this.props.postTest(params) //发送post请求let id = 23
this.props.getTest(id) //发送get请求
}render() {
return(
<div>
{/*你的dom*/}
</div>
);
}
}

7、如果你的异步是click或者hover之类的事件触发的,则只需要通过事件绑定来发送action就行了。


<div onClick={() => this.props.getTest(id)}></div>

还有更多需求 ,可以看看 react-redux-webpack架构


提问环节:


小白:你骗人,你就是个骗子,我看完这篇文章花了11分钟,为什么要写10分钟学会?


。。。


我:。。。下课。。。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台