参考学習サイト:
1、https://www.jianshu.com/p/7a867be0594aReactプロジェクトでReduxを優雅に使用する方法
2、http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.htmlチェン一峰
本文は主に最初のウェブサイトの内容に基づいて学習する.
本明細書に記載のgithubアドレス:https://github.com/hushaohhy/react-router-dom-demo
一、準備
1、使用するプラグインをインストールする

yarn add redux --save-dev

yarn add redux-thunk --save-dev

yarn add react-redux --save-dev

2、プロジェクトの解体は下図の通り

二、コードの作成
1、state.js

// state.js
//      ，   Redux     ，            ，     state         state.js  

//      
//           
//     ：pageTitle
//     ：infoList（         ）
export default {
    pageTitle: '  ',
    infoList: []
}

2、第2ステップはreducersを書く.js

//  2 ：  reducer，             ，         reducers.js  
// reducers.js

//     ，      reducer，   reducer  
import { combineReducers } from 'redux'
//    
import defaultState from './state.js'

//   reducer      
function pageTitle (state = defaultState.pageTitle, action) {
    //    action        
    switch (action.type) {
        case 'SET_PAGE_TITLE':
            return action.data
        default:
            return state
    }
}

function infoList (state = defaultState.infoList, action) {
    switch (action.type) {
        case 'SET_INFO_LIST':
            return action.data
        default:
            return state
    }
}

//     reducer
export default combineReducers({
    pageTitle,
    infoList
})

3、第三歩actionsを作成する.js

//  3 ：  action，         reducer，        action     ，         action
// actions.js

// action    
export function setPageTitle (data) {
    return (dispatch, getState) => {
        dispatch({ type: 'SET_PAGE_TITLE', data: data })
    }
}

/*
export function setInfoList (data) {
    return (dispatch, getState) => {
        //   fetch      
        window.fetch('/api/getInfoList', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => {
            return res.json()
        }).then(data => {
            let { code, data } = data
            if (code === 0) {
                dispatch({ type: 'SET_INFO_LIST', data: data })
            }
        })
    }
}*/

4、第四歩はindexを書く.js

//     ：  store  
// index.js

// applyMiddleware: redux           
// createStore:     store  
import { applyMiddleware, createStore } from 'redux'

//    ，  ：         ，   dispatch  action ，   dispatch    action  ；             ，           ，          :dispatch getState。  dispatch               ，    action   
import thunk from 'redux-thunk'

//   reducer
import reducers from './reducers.js'

//   store  
let store = createStore(
    reducers,
    applyMiddleware(thunk)
)

export default store

三、プロジェクトでの使用
1、入口ファイルでApp.jsでの作成

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import AppRouter from './router/router'
import './services/http'
import './services/httpConfig'

// Provider react-redux        ，  ： store            
//       connect，      
import {Provider} from 'react-redux'

//       store  
import store from './store/index'

class App extends Component {
  render() {
    return (
        
          

              {/*  store  prop  ，             store */}
              
                  {
                      AppRouter.map((route,key) => {
                          if(route.exact) {
                              //       
                              return(
                                   (
                                             //               
                                             //    
                                             
                                         )}
                                  />
                              )
                          }else {
                              return(
                                   (
                                          //               
                                          //    
                                          
                                      )}
                                  />
                              )
                          }
                      })
                  }
              
          
        
    );
  }
}

export default App;

2、新しいTestReduxコンポーネントは以下の通りである.

import React, { Component } from 'react'

// connect     ：    props     ，       ，             
import { connect } from 'react-redux'

//   action
// import { setPageTitle, setInfoList } from '../store/actions.js'
import { setPageTitle } from '../store/actions.js'

// mapStateToProps： state      props 
const mapStateToProps = (state) => {
    return {
        pageTitle: state.pageTitle,
        infoList: state.infoList
    }
}

// mapDispatchToProps： dispatch      props 
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        setPageTitle (data) {
            //                redux-thunk   
            dispatch(setPageTitle(data))
            //   setPageTitle       
            //    redux-thunk     :  action
            //        
            /*dispatch((dispatch, getState) => {
                dispatch({ type: 'SET_PAGE_TITLE', data: data })
            )*/
        },
        /*setInfoList (data) {
            dispatch(setInfoList(data))
        }*/
    }
}

class Test extends Component {
    constructor(props) {
        super(props)
        console.log(this.props)
    }

    changeText() {
        let { setPageTitle, setInfoList } = this.props

        //   setPageTitle action
        setPageTitle('    ')
    }

    render () {
        //  props   store
        let { pageTitle, infoList } = this.props

        //   store
        return (
            

                
{pageTitle}
                    
                {
                    infoList.length > 0 ? (
                        

                            {
                                infoList.map((item, index) => {
                                    return (
                                        
{item.data}
                                    )
                                })
                            }
                        
                    ):null
                }
            
        )
    }

    componentDidMount () {
        // let { setPageTitle, setInfoList } = this.props

        //   setPageTitle action
        // setPageTitle('    ')

        //   setInfoList action
        // setInfoList()
    }
}



export default connect(mapStateToProps, mapDispatchToProps)(Test)

3.Page 2にこのコンポーネントを導入して効果を見る

import React, { Component } from 'react';

import TestRedux from './TestRedux'

export default class Page2 extends Component{
    constructor(props) {
        super(props)
        console.log(this.props.location.state.day)
    }
    componentWillMount() {
        // console.log(global.$)
        global.$.get({
            url:'https://free-api.heweather.net/s6/weather/now?parameters',
            success(res) {
                console.log('  ',res)
            },
            error(error) {
                console.log('  ',error)
            }
        })
    }

    render() {
        return (
            

                
  page2    {this.props.location.state.day}
                
            
        )
    }
}