react项目教程（配置redux ）

http://m.meilele.com/

根据 meilele 制作项目 在点击按钮的时候会隐藏tabbar 显示header
这些操作需要在挂载的时候动态更改的 ，这时候我们需要用到redux
首先我们要先安装redux react-redux redux-thunk

创建一个reducer文件夹用来管理事件操作
在reduser 中会有一个又一个的文件夹来判断action的操作名称来执行不同的操作。
这里我们先创建一个show.js 文件

const initState = {
  title: ''
}
export default (state = initState, action) =>{
  switch(action.type) {
    default:
    return state;
  }
}

在redeucer 的index.js 中引入combineReducer
引入show.js 并且用 combineReducer 导出

import { combineReducers } from 'redux'
import show from './show'

export default combineReducers ({
  show
})

现在我们要在src的最外层目录下创建一个store.js 文件
redux 和 react-redux 是通过store 文件来控制要显示的数据的，用connect 来链接
redux-thunk 是一个redux 的中间件。通过Action 来控制数据的操作

引入这两个组件是为了创建store 和使用中间件 并且引入thunk
store.js 中内容

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rooterReducer from './reducers'//reducer之中是通过传递过来的事件名称操作事件操作的文件
export default createStore(
  rooterReducer,
  applyMiddleware(thunk)
)

react-redux 中 createStore用法
http://cn.redux.js.org/docs/api/createStore.html

创建好store之后 把store引入到index.js 中

import store from './store'
console.log(store.getState())

这是打印出来的就有我们刚写入的show

在react-redux 中的api 文档中描述 必须要引入 Provider 并在最外层嵌套才可以使用connect 所以我们还要最外层的index.js 中引入 Provider

使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下，你的根组件应该嵌套在 中才能使用 connect() 方法。

所以 首页的index.js render 最完美就要嵌套一个Provider 这样只需要在 子页面中 用connect 就可以使用store的 数据

import React from 'react'
import ReactDOM from 'react-dom'
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'
import { Provider } from 'react-redux'
import './index.less'
import App from './App'
import store from './store'
console.log(store.getState())
ReactDOM.render(
  
  
    
  
  
, 
document.getElementById('root'))

现在我们用 redux 实现一下header 显示不同数据的渲染

https://www.jianshu.com/p/24bdcfd8ad3f