简书 React-Redux进行数据的管理

在处理大型项目上，react自己是远远不够的，所以用redux这个框架在配合管理，开始做一个项目，只要用了redux，数据能存在redux里就存在redux里。

在控制台输入：

yarn add redux
yarn add react-redux

 

我们创建这个目录：

store目录下的index.js：

 

引入redux，引入reducer（本子），然后建造函数，export出去

store目录下的reducer.js：

 

然后在APP.js下，引入store，引入react-redux，并且在元素根节点上加上<provider>这个元素，这样<provider></provider>里面的组件就可以调用store下的数据

在header目录下的index.js里引用react-redux

 然后底部的函数：

 

---

 代码进一步修改

所以这样的话，存在constructor里的state就该存在store里了，所以我们删除constructor里的state，然后放在reducer里：

 但是这样的话，header目录下组件中用了this.state.focused就失效了，因为本页面的state没了呀~

 怎么办呢，我们把store里的数据拿出来，放在header目录下index.js里，取名还是focused：

 然后把项目中原来的：this.state换成this.props

 

 然后这样的话，我们在input上绑定的那俩函数也就不能用了，所以也要修改一下：

然后在mapDispathToProps里写入这两个绑定的函数：

 

 然后在reducer里拿这个传过来的action：

 此刻我们的Header组件就变成了无状态组件，所以可以写成一个函数

此刻header目录下的index.js：

import React, {Component} from 'react';
import {CSSTransition} from "react-transition-group";
import {connect} from "react-redux";
import {
  HeaderWrapper, Logo, Nav,NavItem,NavSearch,Addition,Button,SearchWrapper
} from './style'

const Header=(props)=>{
  return (
    <div>
      <HeaderWrapper>
        <Logo/>
        <Nav>
          <NavItem className='left'>首页</NavItem>
          <NavItem className='left'>下载APP</NavItem>
          <NavItem className='right'>
            <i className='iconfont'>&#xe636;</i>
          </NavItem>
          <NavItem className='right'>登录</NavItem>

          <SearchWrapper>
            <CSSTransition timeout={200} in={props.focused} classNames='slide'>
              <NavSearch
                className={props.focused ?'focused':''}
                onFocus={props.handleInputFocus}
                onBlur={props.handleInputBlur}
              ></NavSearch>
            </CSSTransition>
            <i className={props.focused ?'focused iconfont':'iconfont'}>&#xe617;</i>
          </SearchWrapper>
        </Nav>

        <Addition>
          <Button className='writing'>
            <i className='iconfont'>&#xe600;</i>
            写文章
          </Button>
          <Button className='reg'>注册</Button>
        </Addition>

      </HeaderWrapper>
    </div>
  );
}

const mapStateToProps=(state)=>{
  return{
    focused:state.focused
  }
}
const mapDispathToProps=(dispatch)=>{
  return{
    handleInputFocus(){
      const action={//创建一个数组
        type:'search_focus'
      }
      dispatch(action)//发送给reducer
    },
    handleInputBlur(){
      const action={
        type:'search_blur'
      }
      dispatch(action)
    }
  }

}

export default connect(mapStateToProps,mapDispathToProps)(Header);