转载

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

你可以结合这份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分钟学会？

。。。

我：。。。下课。。。

原文 https://segmentfault.com/a/1190000008063435

正文到此结束

所属分类：编程技术

本文标签： root js 管理参数 IO web https 数据 REST Action struct UI 插件 IOS ip jquery DOM 文章端口配置 App ACE 源码安装 CTO http 测试 cat 需求 DDL 服务器代码 example id
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流