根据 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
<Provider store>
<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下，你的根组件应该嵌套在 <Provider> 中才能使用 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(
<Provider store= {store}>
<Router>
<Route component = {App} />
</Router>
</Provider>
,
document.getElementById('root'))
现在我们用 redux 实现一下header 显示不同数据的渲染
