Redux(六):React-Redux的示例Demo代码

Demo代码

根据文章1-5，我们总结下来，如果想正常使用Redux，需要在工程里配置以下文件

----app
  ----actions
    ----RightBar.jsx           <==RightBar的Actions
    ----index.jsx              <==方便对Actions统一导出
  ----reducers     
    ----RightBar.jsx           <==RightBar的Reducer
    ----index.jsx              <==方便对Reducer统一导出
  ----redux
    ----configDevTools.jsx     <==配置DevTools进行调试
    ----configReducer.jsx      <==配置Reducer，进行combineReducers工作
    ----configStore.jsx        <==配置Store，加入中间件和DevTools
  ----components

配置文件

在配置文件里我们用到了文章使用目录路径import进行统一导入

configDevTools.jsx

//调试工具
import {createDevTools} from "redux-devtools";
import LogMonitor from "redux-devtools-log-monitor";
import DockMonitor from "redux-devtools-dock-monitor";

const DevTools = createDevTools(
    <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
        <LogMonitor theme="tomorrow" preserveScrollTop={false}/>
    </DockMonitor>
);

export default DevTools

configReducer

//利用combineReducers 合并reducers
import {combineReducers} from "redux";
//通过reducers目录下的index统一导入
import * as Reducers from "../reducers";

export default combineReducers(Reducers)

configStore

import createLogger from "redux-logger";
import {createStore, applyMiddleware, compose} from "redux";
import DevTools from "./configDevTools"; //引入DevTools调试组件

//调用日志打印方法
const loggerMiddleware = createLogger();

//创建一个中间件集合
const middleware = [loggerMiddleware];

//利用compose增强store，这个 store 与 applyMiddleware 和 redux-devtools 一起使用
const finalCreateStore = compose(
    applyMiddleware(...middleware),
    DevTools.instrument(),
)(createStore);

export default finalCreateStore

赏

请问老板还招人么(/ω＼)

支付宝

微信