[React学习旅程]-->redux笔记

redux流向图

需要安装的模块

1. redux -- 核心模块

2. react-redux -- 它是帮助我们实现数据分块的

3. redux中间件:

   • redux-thunk -- 它帮助我们可以在redux中做数据请求

   • redux-saga -- redux-thunk升级版

4. 扩展插件: 帮助我们把谷歌浏览器redux工具识别我们代码应用redux

   • redux-devtools-extension

文件和主要功能组成(分块)

1. Store(index.js)

   1. 引入

      import { createStore , applyMiddleware } form 'redux'
      //创建store的方法
      import thunk from 'redux-thunk'
      //数据分片的中间件
      import { composeWithDevTools } from 'redux-devtools-extension'
      //浏览器插件的调用
      import rootReducer from '@/reducers'
      //reducer根对象
      

   2. 创建store

      const store = createStore(rootReducer,composeWithDevToolS(applyMiddleware(thunk)))
      export default store //导出
      

2. reducer(index.js)

   1. 引入

      import { combineReducers } from 'redux'
      //整合切分后的reducer
      import homeModule from 'views/home/store'
      //分块的store模块
      

   2. 创建reducer修改state

      const rootReducer = combineReducers({
          homeModule
          //数据分片
      })
      export default rootReducer
      

3. 创建action(index.js)

   1. 引入

      import homeActions from '@/actions/homeAction'
      //引入分块的action动作
      

   2. 创建action

      const action = name => {
          switch(name){
              case 'home' :
                  return {...homeActions};
              default : break ;
          }
      }
      export default action
      

4. actionType

   1. 定义动作类型常量

      export const GET_HOT_MOVIES = 'GET_HOT_MOVIES'
      

5. 创建分片action

   1. 引入

      import request from 'utils/request'
      //封装的axios方法
      import { getCookie } from 'utils/cookie'
      //封装的cookie方法
      import { GET_HOT_MOVIES } from '@/actions/actionType'
      //动作类型常量
      import api from '@/api'
      //统一的接口文件
      

   2. 创建分片action

      const homeAction = {
          getHotMovies(){
              return async dispatch => {
                  const result = await request({
                      url:api.HOT_MOVIES,
                      params:{
                          token:''
                      }
                  })
                 dispatch({
                     type:GET_HOT_MOVIES,
                     payload:result.data
                 })
              }
          }
      }
      export default homeAction
      

6. 分块的store.js模块

   1. 引入

      import {GET_HOT_MOVIES}
      

   2. 创建

      const homeModule = (state = {hot_movies:null},action)=>{
          const newState = JSON.parse(JSON.stringify(state));
          switch(action.type){
              case GET_HOT_MOVIES :
                  newState.hot_movies = action.payload;
                  break;
              default : break ;
          }
          return newState
      }
      export default homeModule
      

7. index.js(主文件)

   1. 引入

      import { Provider } from 'react-redux'
      import store from 'store'
      

   2. 创建

        <Provider store = { store }>
            <Router>
                <App/>
            </Router>
        </Provider>
      

8. 分块的组件文件

   1. 引入

      import action from '@/actions'
      import { bindActionCreators } from 'redux'
      import { connect } from 'react-redux'
      

   2. 创建

      const mapStateFromProps = state => {
          return state.homeModule
      }
      const mapDispatchFromProps = dispatch => {
          return bindActionCreators(action('home'),dispatch)
      }
      export default connect(mapStateFromProps,mapDispatchFromProps)(Hot)//导出组件