慕课网 react学习笔记-- react-redux 进行数据管理（部分）

一、首先在src下创建store文件夹

二、在store下面创建 index 和 reducer 代码如下

index.js如下

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

reducer.js如下

const defaultState = {
  focused: fasle
}

export default (state = defaultState, action) => {
  if(action.type === 'search_focus') {
      // state的副本，不能直接修改 state
      let copyState = JSON.parse(JSON.stringfy(state))
          copyState.focused = true
      return copyState 
  }
  if(action.type === 'search_focus') {
      // state的副本，不能直接修改 state
      let copyState = JSON.parse(JSON.stringfy(state))
          copyState.focused = false
      return copyState 
  }
  return state
}

引用Header组件的app.js

import React, {Fragment} from 'react';

// 借助react-redux中的Provider方法 保证他包裹的组件都能直接用到 store
import { Provider } from 'react-redux';

import store from './store/index';


import HeaderWraper from './components/header';


function App() {
  return (
    
      
      

      // 用法  
      
          
            
          
      


      

        jianshu-app
      
     
  );
}

export default App;

Header组件中的代码

import React, {Fragment} from 'react'

//组件借助provider关联 store的方法
import { connect } from 'react-redux'

import {  
    HeaderInner, 
    Logo,
    Nav,
    NavItem,
    NavSearch,
    NavInput,
    Addtion,
    Button
} from '../../style';
const HeaderWraper = (props) => {
    return (
        
                
                    
                    

                        首页
                        下载App
                        
                            
                            
                        
                        登陆
                        
                        
                          
                        
                        
                            注册
                            
                                
                                写文章
                            
                        
                    
                
               
    )
}

// 两个参数
const mapStateToProps = (state) => {
    return {
        focused: state.Header.focused
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleFocus() {
            const action = {
                type: 'search_focus'
            }
            dispatch(action)
        },
        handleBlur() {
            const action = {
                type: 'search_blur'
            }
            dispatch(action)
        }
    }
}

// connect 的用法
export default connect(mapStateToProps, mapDispatchToProps)(HeaderWraper)

//  有时候如果项目非常大业务复杂，单单的把所有数据都放在 reducer里面会非常的冗杂，不易维护，react-redux提供了combineReducers 进行reducer组件的拆分

三、在header文件下面新建自己的store reducer.js和index.js

reducer.js如下

const defaultState = {
    focused: false
}

export default (state = defaultState, action) => {
    if (action.type === 'search_focus') {
        const stateFb = JSON.parse(JSON.stringify(state))
        stateFb.focused = true
        return  stateFb
    }
    if (action.type === 'search_blur') {
        const stateFb = JSON.parse(JSON.stringify(state)) 
        stateFb.focused = false
        return  stateFb
    }
    return state
}

index.js如下

import reducer from './reducer'

export { reducer }

那么 src下面的reducer.js修改成如下

// combineReducers的用法
import { combineReducers } from 'redux'

import {reducer as HeaderReducer } from '../components/header/store'

const reducer = combineReducers({
    Header: HeaderReducer
})

export default reducer

以上是2019.10.15学习的内容，笔记一下，以便复习，后续继续，fighting