react + react-router 实现 header 组件登录退出功能

这里是以简书的头部组件为例，使用了 styled-components 来编写样式

因为这里使用了 reducer 的拆分，所以同样的也是拆分了很多 actionCreates 文件

总的reducer，以 immutable 对象的形式存储

import {
   combineReducers} from 'redux-immutable'
import headerReducer from '../common/header/store/reducer'
import loginReducer from '../pages/login/store/reducer'

export default combineReducers({
   
    header: headerReducer,
    login: loginReducer
})

loginReducer.js，控制登录功能显示与隐藏状态

constants文件用于存储 action 中的 type，以常量的形式去存储
export const CHANGE_LOGIN = ‘change_login’
export const CHANGE_LOGOUT = ‘change_logout’

import {
   fromJS} from 'immutable'
import * as constants from './constants'

const defaultState = fromJS({
   
    login: false
})

export default (state = defaultState, action) => {
   
    switch (action.type) {
   
        case constants.CHANGE_LOGIN:
            return state.set('login', true)
        case constants.CHANGE_LOGOUT:
            return state.set('login', false)
        default:
            return state
    }
}

header.js，根据login的状态来判断是显示退出还是登录，点击登录跳转到login页面，点击退出把login的状态设置成false，同时会页面显示登录

import React from 'react'
import {
   Link} from 'react-router-dom'
import {
   connect} from 'react-redux'
import {
   GlobalStyle} from './../../statics/iconfont/iconfont'
import * as actionCreates from './store/actionCreators'
// 因为login这个状态在存储在loginActionCreates这个store中，所以需要引入loginActionCreates
import * as loginActionCreates from '../../pages/login/store/actionCreators'
import {
   
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
} from './style'