Redux的store和reducer基本搭建

这边把自己工程中的基本搭建记录下来

用到的库与中间件:

• redux-logger: 记录redux发送action的日志的中间件
• redux-thunk: 让dispatch可以接收函数的中间件
• react-router-redux: 用redux来管理router

package.json中用到的:

{
  "name": "aaa-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.5.1",
    "axios": "^0.18.0",
    "draft-js": "^0.10.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

store的代码:

import { applyMiddleware, createStore, compose } from 'redux';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import {reducer} from '../reducers/reducer';
import { environment } from '../../components/base/commonFuncs'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;  // 使用浏览器的rendux工具

export const history = createHistory();  // createHistory({ basename: '/spa' });这样可以设置basename

const historyMiddleware = routerMiddleware(history);

const middleware = [
  thunk,
  historyMiddleware,
  (environment === "development") && logger
].filter(Boolean)

export const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(
    ...middleware
  )
));

reducer的代码:

import {combineReducers} from 'redux';  // 捆绑多个reducer成为一个reducer
import {routerReducer} from 'react-router-redux';  // 使用redux管理router所用到的reducer
import { reducer as formReducer } from 'redux-form';  // 使用redux-form所用到的reducer
import { aReducer } from './a/reducer'  // 引入其他reducer


export const reducer = combineReducers({
    form: formReducer,
    router: routerReducer,
    a: aReducer
})

入口的代码

import React, { Component } from 'react'
import './App.css'
import { Provider } from 'react-redux'
import store from './redux/store'
import First from './components/first'

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div className="App">
          <First />
        </div>
      </Provider>
    );
  }
}

export default App

主组件的代码(控制路由的代码)

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router';
import { connect } from "react-redux"
import { ConnectedRouter } from 'react-router-redux';  // react-router-redux提供了router组件
import { history } from '../redux/store';

class First extends Component {
    render(){
        return(
           <ConnectedRouter history={history}>
               <div className="BuckApp">
                 <WarningBar />
                 <Header/>

                 <div className="content-cont">
                   <Sidebar handleNavLinkClick={this.handleNavLinkClick}/>
                   <div className="page-area">
                     <Switch>
                       <Route exact path="/" render={() => (
                           <Redirect to="/dashboard"/>
                       )}/>
                       <Route exact path="/base" component={BasePage}/>
                     </Switch>
                   </div>
                 </div>
               </div>
             </ConnectedRouter>
        )
    }
}

const mapStateToProps = state => {
  return {
    talentsInfo: state.talents,
    router: state.router,
  }
}

const mapDispatchToProps = {
  aFunction,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(First)