react利用redux-thunk+axios获取后台数据

1. 安装redux-thunk

   1. yarn add redux-thunk

       

2. 在外层store文件夹下的index.js中使用

   1. import { createStore , compose , applyMiddleware  } from 'redux';
      import thunk from 'redux-thunk';
      import reducer from './reducer'
      
      const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
      const store = createStore(reducer,composeEnhancers(
          applyMiddleware(thunk)
      ))
      
      export default store;

       

3. actionCreators.js中就能返回函数了

4. 安装axios

   1. yarn add axios

       

5. actionCreators.js中引用axios

   1. import axios from 'axios';

       

6. 代码

   1. const changeList = (data) => ({
          type:actionTypes.CHANGE_LIST,
          data:fromJS(data)
      })
      
      export const getList = () => {
          return (dispatch) => {
              axios.get('/api/headerList.json')
              .then((res) => {
                  const data = res.data;
                  dispatch(changeList(data.data))
              })
              .catch(() => {
                  console.log('catch')
              })
          }
      }

       

7. 模拟后台数据

   1. 在项目public中建立文件夹api

   2. 在文件夹api中创建文件headerList.json

   3. 就能调用headerList.json中的数据了

8. 展现在页面上--index.js

   1. {
          this.props.list.map((item) => {
              return <SearchInfoItem key = {item}>{item}</SearchInfoItem>
          })
      }