|
一、使用cnpm install redux --save和cnpm install react-redux --save命令下载
二、在src目录下创建store文件夹，再在store文件夹中创建index.js文件和reducer.js文件
三、在刚刚创建好的index.js文件中引入
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
在刚刚创建好的reducer.js文件中，返回一个函数，在函数中判断action的类型，针对不同的类型，对数据进行不同的操作，最后将state返回
const defaultState = {
focused: false
};
export default (state = defaultState,action) =>{
if(action.type == 'serch_focus') {
return {
focused: true
}
}
if(action.type == 'serch_blur') {
return {
focused: false
}
}
return state;
}
在App.js中，要import store from '...' 和 import { Provider } from ‘react-redux‘，return时
要<Provider store={store}>。。。。</Provider>包裹起来，代表store中的数据可以供应中间的。。。组件使用
import React, { Component } from 'react';
import {GlobalStyled} from './style.js';
import {GlobalStyled2} from './statics/iconfont/iconfont.js';
import Header from './common/header/index.js';
import store from './store/index.js';
import { Provider } from 'react-redux';
class App extends Component {
render() {
return (
<Provider store={store}>
<GlobalStyled />
<GlobalStyled2 />
<Header />
</Provider>
);
}
}
export default App;
在组件中要import { connect } from ‘react-redux‘’，原来的this.state.falsed(自己定义的数据）就可以改为this.props.falsed,但由于是无状态组件，就直接写成了函数，传参props，所以就直接写成了props.falsed
/*store里面的数据如何映射到这个组件的props中去*/
const mapStateToProps = (state) =>{
return {
focused:state.focused
}
}
/*定义action的类型，方便reducer.js去判断，一定要dispatch出去！！！*/
const mapDispatchToProps = (dispatch) =>{
return {
handleInputFocus() {
const action = {
type: 'serch_focus'
};
dispatch(action);
},
handleInputBlur() {
const action = {
type: 'serch_blur'
};
dispatch(action);
}
}
}
最后向外暴露export default connect(mapStateToProps,mapDispatchToProps)(Header);
import React from 'react';
import { CSSTransition} from 'react-transition-group';
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch,Addition,Button, SearchWrapper } from './style.js';
import { connect } from 'react-redux';
const Header = (props) =>{
return (
<HeaderWrapper>
<Logo />
<Nav>
<NavItem className='left active'>首页</NavItem>
<NavItem className='left'>下载App</NavItem>
<NavItem className='right'>登录</NavItem>
<NavItem className='right'>
<i className='iconfont'></i>
</NavItem>
<SearchWrapper>
<CSSTransition
in={props.focused}
timeout={4000}
classNames="slide"
>
<NavSearch
className={props.focused ? 'focused': ''}
onFocus={props.handleInputFocus}
onBlur={props.handleInputBlur}
>
</NavSearch>
</CSSTransition>
<i className={props.focused ? 'focused iconfont': 'iconfont'}></i>
</SearchWrapper>
</Nav>
<Addition>
<Button className='writting'>
<i className='iconfont'></i>写文章
</Button>
<Button className='reg'>注册</Button>
</Addition>
</HeaderWrapper>
);
}
/*store里面的数据如何映射到这个组件的props中去*/
const mapStateToProps = (state) =>{
return {
focused:state.focused
}
}
const mapDispatchToProps = (dispatch) =>{
return {
handleInputFocus() {
const action = {
type: 'serch_focus'
};
dispatch(action);
},
handleInputBlur() {
const action = {
type: 'serch_blur'
};
dispatch(action);
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);
最后实现的效果：简书的Header部分
| 
转播
