react+redux+react-router项目搭建

reducer文件  统一管理

store.js 某一个模块的state

//登入成功
export const LOG_SUCCESS = 'LOG_SUCCESS'
//正在登录
export const LOG_ING = 'LOG_ING'
//注销登录
export const LOG_OUT = 'LOG_OUT'
//主要是统一保存状态对应的名称


/*
*action方法
*action创建函数的意思就是创建一个action的函数，函数返回一个对象
*/

//注销 同步
export function log_out() {
    return {
        type: LOG_OUT
    }
}

//登入 异步
export function LogIN(obj) {
    return {
        type: LOG_ING,
        payload: obj
    }
}


/*
*dispatch 派发
*
*/

const fetchQuestionData = (payload) => {
    return (dispatch) => {
        console.log(payload)
        dispatch(LogIN(payload))
        
    }
}


export const actions = {
    fetchQuestionData,
}



/*
*reducer
*类似数组中的reduce
*传递一个旧的state通过加工后产出一个新的state：
*/
//异步状态需要使用中间件
export default function (state, action) {
    //console.log("11125")
    switch (action.type) {
        case LOG_SUCCESS:
            //console.log(action)
            return Object.assign({}, state, action.payload)
            break
        case LOG_ING:
            //console.log(action)
            let newobj = Object.assign({}, state, action.payload)
            console.log(newobj)
            return newobj
            break
        case LOG_OUT:
            return {}
            break
        default:
            return {
                dd: 123
            }
    }
}

 

进行所有模块的整合功能reducers.js

import { combineReducers } from 'redux'
//引入某一模块
import reducer from './store'

//整合不同模块的state
const rootReducer = combineReducers({
    reducer
})

export default rootReducer

 

进行store的创建 及其他需要的功能整合

import { createStore, applyMiddleware } from 'redux'
//redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，
//函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装
import thunk from 'redux-thunk'
// 利用redux-logger打印日志
import { createLogger } from 'redux-logger'
// 安装redux-devtools-extension的可视化工具。
import { composeWithDevTools } from 'redux-devtools-extension'

// 使用日志打印方法， collapsed让action折叠，看着舒服。
//合并的多个reducer，解耦
import rootReducer from './reducers'
//整理中间件
const middlewares = [thunk]
//创建createstore
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
//抛出
export default function configureStore(initialState) {
    return createStoreWithMiddleware(rootReducer, initialState, composeWithDevTools(), createLogger({ collapsed: true }))
}

router 路由文件

import React from 'react'
import { Router, Route, hashHistory } from 'react-router'
import { Provider } from 'react-redux'

// Provider  可以让容器组件拿到state
// Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。
// 它的原理是React组件的context属性
import store from '../store/index'
//import App from "../App"
// import Helloword from "../compents/HelloWord/index"
// import Child from "../compents/Child/index"
import Error4 from "../compents/error/index"


const Root = () => {
    return (
        <Provider store={store()}>
            <Router history={hashHistory}>
                {/* 设置IndexRoute后 访问'/'路径时，默认加载'Home'组件  */}
                {/* <IndexRoute component={App}/> */}
                <Route path="/"
                    getComponent={(location, cb) => {
                        require.ensure([], require => {
                            cb(null, require('../App').default)
                        }, 'App');
                    }} />
                <Route path="/Helloword"
                    getComponent={(location, cb) => {
                        require.ensure([], require => {
                            cb(null, require('../compents/HelloWord/index').default)
                        }, 'HelloWord');
                    }} />
                <Route path="/Child" getComponent={(location, cb) => {
                    require.ensure([], require => {
                        cb(null, require('../compents/Child/index').default)
                    }, 'Child');
                }} />
                <Route path="/Error4" component={Error4} />
                <Route path="*" component={Error4} />
            </Router>
        </Provider>
    )
}

export default Root

App.js首页的文件应用

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { actions } from "./store/store"



class App extends Component {
  // constructor(props){
  //   super(props)
  // }


  click() {
    //调用值
    this.props.fetchQuestionData({ kk: 123 });
  }

  render() {
    console.log(this.props)
    return (
      <div className="App">
        <h1 onClick={this.click.bind(this)}>这是APP首页</h1>
      </div>
    );
  }
}

const mapStateToProps = ({ reducer }) => {
  // console.log(reducer)
  return reducer
}

export default connect(mapStateToProps, actions)(App)

package.json

​​{
  "name": "reactpage",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-router": "^3.2.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-actions": "^2.4.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "redux-devtools": "^3.4.1",
    "redux-devtools-dock-monitor": "^1.1.3",
    "redux-devtools-extension": "^2.13.5",
    "redux-devtools-log-monitor": "^1.4.0",
    "redux-logger": "^3.0.6"
  }
}