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
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"></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'}></span>
</SearchWrapper>
</Nav>
<Addtion>
<Button className='writting'>
<span className="iconfont"></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);
最新文章
- RabbitMQ的安装
- CSS选择器优先级排列
- Tomcat性能调优
- ultraedit正则使用
- geckodriver v0.11.0 github上下载的
- http://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword
- 从客户端中检测到有潜在危险的Request.Form值 的解决方法
- [转]重新分配内置存储空间 android手机
- Android最佳实践指南
- dut1305 台阶
- Linux CPU数量判断，通过/proc/cpuinfo.
- JS 匿名函数
- mysql错误提示不是英语的解决办法
- Java眼中的XML文件写入
- thymeleaf：局部变量 th:with
- eShopOnContainers 知多少[8]：Ordering microservice
- Getting Started with XlsxWriter
- python 记录linux网速到文件。
- 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
- 腾讯云主机安装登录mysql失败--解决方案[重置root密码并实现远程连接]