4 react 简书 引入 redux 的 combineReducers 对 redux 数据进行管理

Posted 2020-11-24 zonehoo

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

import { createStore ,compose, applyMiddleware } from ‘redux‘;

import reducer from ‘./reducer‘;

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, composeEnhancers(

applyMiddleware()

));

export default store;

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">&#xe601;</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‘}>&#xe60b;</span>

                </SearchWrapper>

            </Nav>

            <Addtion>

                <Button className=‘writting‘>

                <span className="iconfont">&#xe703;</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);