4 react 简书 引入 redux 的 combineReducers 对 redux 数据进行管理

1. src 下的 common 下的 header 创建 store 文件夹 下创建 reducer.js

# src/common/header/store/reducer.js

const stateDefault = {

focused : false

};

export default (state = stateDefault, action)=>{

if(action.type === 'focus' || action.type === 'blur'){

const newState = JSON.parse(JSON.stringify(state));

newState.focused = action.focused;

return newState;

}

return state;

}

2. 添加 redux-devtools-extension 拓展 并 创建 src/store/index.js 对 redux 数据进行监听

(未装 redux 拓展 , 使用 yarn add redux 进行安装)

yarn add redux-devtools-extension

# src/store/index.js

import { createStore ,compose, applyMiddleware } from 'redux';

import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, composeEnhancers(

applyMiddleware()

));

export default store;

3. 创建 src/store/reduct.js 使用 redux 的  对 header 的 reducer 数据进行管理

# src/store/reduct.js

import { combineReducers } from 'redux';

import headerReducer from '../common/header/store';

export default combineReducers({

header : headerReducer

});

4. 修改 src/App.js 使 app 下的全部组件支持 store 数据存取

(未装 redux 拓展 , 使用 yarn add react-redux 进行安装)

#src/App.js

import React from 'react';

import Header from './common/header';

import store from './store';

import {Provider} from 'react-redux';

function App() {

return (

<div>

<Provider store={store}>

<Header />

</Provider>

</div>

);

}

export default App;

5. 修改 src/common/header/index.js 组件的引入路径

#src/common/header/index.js

import React from 'react';

import {CSSTransition} from 'react-transition-group';

import {connect} from 'react-redux';

import {

HeaderWrapper,

Logo,

Nav,

NavItem,

SearchWrapper,

NavSearch,

Addtion,

Button

} from './style';

const Header = (props)=>{

return (

<HeaderWrapper>

<Logo />

<Nav>

<NavItem className="left active">首页</NavItem>

<NavItem className="left">下载</NavItem>

<NavItem className="right">登陆</NavItem>

<NavItem className="right">

<span className="iconfont">&#xe601;</span>

</NavItem>

<SearchWrapper>

<CSSTransition

in={props.focused}

timeout={200}

classNames='slide'

>

<NavSearch

className={props.focused? 'focused' : ''}

onFocus={props.searchFocus}

onBlur={props.searchBlur}

></NavSearch>

</CSSTransition>

<span className={props.focused? 'focused iconfont' : 'iconfont'}>&#xe60b;</span>

</SearchWrapper>

</Nav>

<Addtion>

<Button className='writting'>

<span className="iconfont">&#xe703;</span>

写文章

</Button>

<Button className='reg'>注册</Button>

</Addtion>

</HeaderWrapper>

);

}

const PropsToState = (state)=>{

return {

focused : state.header.focused

}

}

const PropsToDispatch = (dispatch)=>{

return {

searchFocus(){

const action = {

type : 'focus',

focused : true

}

dispatch(action);

},

searchBlur(){

const action = {

type : 'blur',

focused : false

}

dispatch(action);

}

}

}

export default connect(PropsToState, PropsToDispatch)(Header);