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"
  }
}