本文结合小例子讲解redux的用法，适合有一定redux基础的，了解redux各个模块但是不太会运用的同学来了解哦，没有基础的建议先看redux基础再来哦～（附上redux官网链接https://www.redux.org.cn/
）

下面进入正题，首先附上代码结构

image.png

第一步，构建store.js，直接上代码：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducers'

const store = createStore(reducer, applyMiddleware(thunk))

export default store

这里通过createStore创建store，传入reducer和异步中间件。

第二步，构建App.js，上代码：

import React, { Component } from 'react';
import './App.css';
import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import store from './store'
import { Provider } from 'react-redux'
import Home from './pages/Home'


class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <Switch>
            <Redirect from='/' to='/home' exact />
            <Route path='/home' component={Home} />
          </Switch>
        </Router>
      </Provider>
    )
  }
}
export default App;

这里我们在App.js里面需要通过Provider注入store，并且我结合了hash路由进行一个路由的匹配，不了解路由的自行学习哦～。

第三步，构建一个异步请求的工具utils/http.js，上代码：

import axios from 'axios'
const http = {
    get({ url = "", params = {} } = {}) {
        return axios({
            url: url,
            method: 'GET',
            params
        })
            .then(result => result.data)
            .catch(err => {
                throw new Error(err)
            })
    },
    post({ url = "", params = {}, data = {}, headers = {} } = {}) {
        return axios({
            url: url,
            method: 'POST',
            params,
            data,
            headers
        })
            .then(result => result.data)
            .catch(err => {
                throw new Error(err)
            })
    }
}
export default http

这里我用的axios进行异步请求，配置了get和post两种方式。

第四步，构建发起请求的services/countService.js，上代码：

import http from '../utils/http'

/**
 * 获取数量
 */
export const fetchCountService = async () => {
    let result = await http.get({
        url: 'https://api.myjson.com/bins/1a48uq'
    }).catch(err => {
        throw new Error(err);
    }
    )
    if (result.data) {
        return result.data
    } else {
        throw new Error('缺少data字段')
    }
}

这里我用的请求地址是Myjson这个网站，可以自行构建数据生成请求地址（附上链接：http://myjson.com/
），下面是我简单构建的数据：

image.png

第五步，构建action，在actions文件夹下，我创建了一个index.js文件和count.js文件。
index.js文件用于引入所有的action，便于在组件中直接导入actions即可，代码如下：

export * from './count'

接下来构建count.js文件，将异步请求获取到的数据派发给reducer，上代码：

import {
    fetchCountService
} from '../services/countService'

/**
 * 查询数量
 */
export const FETCH_COUNT_REQUEST = 'FETCH_COUNT_REQUEST'
export const FETCH_COUNT_SUCCESS = 'FETCH_COUNT_SUCCESS'
export const FETCH_COUNT_FAILURE = 'FETCH_COUNT_FAILURE'
export const fetchCount = () => async (dispatch, getState) => {
    dispatch({
        type: FETCH_COUNT_REQUEST
    })
    let res = await fetchCountService().catch(err => {
        dispatch({
            type: FETCH_COUNT_FAILURE
        })
        throw new Error(err)
    })
    dispatch({
        type: FETCH_COUNT_SUCCESS,
        payload: res
    })
    return res

}

第六步，构建reducer，在reducers文件夹下，我创建了一个index.js文件和count.js文件。
index.js文件用于引入所有的reducer，便于在App.js组件中直接导入reducers即可，代码如下：

import { combineReducers } from 'redux'

import count from './count'
const reducer = combineReducers({
    count
})
export default reducer

这里用到了combineReducers将所有到reducer结合到一起。
接下来构建count.js文件，将数据存储到redux，上代码：

import {
    FETCH_COUNT_REQUEST,
    FETCH_COUNT_SUCCESS,
    FETCH_COUNT_FAILURE
} from '../actions'

const defaultState = {
    fetchStatus: '',
    count: null
}

const count = (state = defaultState, action) => {
    const { type, payload } = action
    switch (type) {
        case FETCH_COUNT_REQUEST:
            return {
                ...state,
                fetchStatus: 'LOADING',
                count: null
            }
        case FETCH_COUNT_SUCCESS:
            return {
                ...state,
                fetchStatus: 'SUCCESS',
                count: payload
            }
        case FETCH_COUNT_FAILURE:
            return {
                ...state,
                fetchStatus: 'FAILURE',
                count: null
            }
        default:
            return state
    }
}

export default count

最后一步，在Home组件中使用即可，构建Home/index.js文件，上代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchCount } from '../../actions'

class Home extends Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.fetchCount().then(res => {
            console.log('成功了', res)
        }).catch(err => {
            console.log('出错了', err)
        })
    }
    render() {
        const { count, fetchStatus } = this.props
        let content = null
        if (fetchStatus === 'LOADING') {
            content = <p>加载中</p>
        } else if (fetchStatus === 'SUCCESS') {
            content = <p>数量：{count.count}</p>
        } else {
            content = <p>出错了</p>
        }
        return (
            <div>
                首页
                {content}
            </div>
        )
    }
}

const mapStateToProps = ({ count }) => {
    return {
        ...count
    }
}
const mapDispatchToProps = {
    fetchCount
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)

这里通过react-redux里的connect传入mapStateToProps和mapDispatchToProps，这样就可以在组件中调用action啦，发起异步请求获取数据并存入redux。

以上就是完整的栗子啦，希望能帮到各位小伙伴，有什么问题欢迎指出哦，共同进步啦～