React项目中中使用redux进行数据管理

一、使用cnpm install redux --save和cnpm install react-redux --save命令下载

二、在src目录下创建store文件夹，再在store文件夹中创建index.js文件和reducer.js文件

1. 

三、在刚刚创建好的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'>&#xe636;</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'}>&#xe60b;</i>
			       </SearchWrapper>
			    </Nav>
			    <Addition>
			       <Button className='writting'>
			           <i className='iconfont'>&#xe615;</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部分