react-redux的使用对比仅使用redux

最新推荐文章于 2024-07-11 15:59:19 发布

湖边看客

最新推荐文章于 2024-07-11 15:59:19 发布

阅读量347

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/VVVVV16/article/details/127623041

版权

我们在单纯使用redux 结合 react 使用的时候是比较麻烦的

因为我们需要手动的dispatch

并且还要手动的subscribe 详细的请看下面这篇链接

Redux中间件redux-thunk_湖边看客的博客-CSDN博客

我们在使用这个react-redux之前我们需要先安装这个react-redux的包

安装好这个包以后我们在我们的app的出口文件中

写入这几行 store 的路径根据自己的项目进行引入

store 在我们使用redux的时候怎么配置我们在使用react-redux的时候也这样进行配置就行了

import { applyMiddleware, combineReducers, createStore, compose } from 'redux'


//这个页面 是用来展示  reducer  被拆分成多个  reducer  以后  如何 进行拼接

//我们将分别写的  reducer    导入到这个文件中
import CityReducer from '../redux/reducers/CityReduer'
import TabbarReducer from '../redux/reducers/TabbarReducer'
import CinemaList from '../redux/reducers/CinemaReducer'

//引入redux-thunk这个中间件
//这个中间件是为了  解决异步的问题
import reduxThunk from 'redux-thunk'
//引入redux-promise
//和redux-thunk的效果一样  但是用法不一样
import reduxPromise from 'redux-promise'
//-------------------------------------以上的是我们中间件以及相关reducer的导入
//----接下来  我们将上面的之前所用的redux  改成 react-redux的







//然后利用我们的这个combineReducers   将我们的reducer  进行合并

const reducer = combineReducers({
    CityReducer,
    TabbarReducer,
    CinemaList
})



//以下这些   是为了  使用我们的开发工具   redux 的    专门配置了 两行    可以看他们的 文档 配置 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, /* preloadedState, */ composeEnhancers(applyMiddleware(reduxThunk, reduxPromise)))







//创建store对象
// const store = createStore(reducer, applyMiddleware(reduxThunk, reduxPromise))  //applyMiddleware使用中间件reduxThunk
//这样  当我们 遇到   异步的问题  这个 reduxThunk   就会起作用




//将这个store  导出去
export default store

完成以上的操作我们就成功的将 store 中管理的状态交给了react-redux 并在接下来我们在各个组件中用connect 进行使用

在组件中我们需要导入actionCreator 和 connect