[JavaScript知识库]react-redux的使用对比仅使用redux

我们在单纯使用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

之后

我们这两个名字可以任意取? ?mapStateToProps? 管理的就是状态? ?我们通过state就可以拿到上面<Provider> 传过来的store所管理的状态

下面这个mapDispatchToProps 所管理的就是回调函数? 在这里 也就是 上面到入过来的actionCreator 里面的函数

在没有用这个react-redux之前? 我们是将actionCreator的返回结果 手动dispatch出去的

写在这里?

交给下面的connect

这个connect 是可以有两个参数的? ?前面是状态? 后面是回调函数

如果状态没有的话

?我们这样就行

?这里的话就两个? ?向上面一样?

这样包裹以后 这个Cinema就自动变成了? connect这东西的子组件? connect将它所拥有的状态和回调函数就直接交给了Cinema组件

Cinema组件 在内部就可以直接用props调用就行

包括jsx这样

我们也不用再像之前那样 手动的dispatch 和subscribe了??

我们只需要调用connect传过来的actionCreator和状态就行了

connect 会自动帮我们进行dispatch 和subscribe? ??

///-----------------------------------------------------------------------------------------------------

以下就是我们没有用react-redux的时候? 手动dispatch和subscribe

?

?在上面推荐的链接中就可以看到? 就不说了

?