1.首先我们需要用react-redux来管理数据，在login目录下新建新建一个store文件夹，在store文件下新建4个文件：index.js,reducer.js,actionTypes.js,actionCreators.js
2.在reducer.js文件中，我们自定义一个login用来表示我们是否登录，login的false表示的是当前是没有登录的状态，true表示是已经登录的状态
3.然后我们需要在src根目录下的store的reducer中，添加login下面的store，这样我们在login文件夹下面的reducer中，也可以接收到请求并处理数据
4.在我们浏览器的控制台的redux中，我们可以发现;说明这一步是ok的
5.在首页中，如果我们没有登录显示“登录”，如果已经登录了我们显示“退出”，这怎么实现
-
因为登录在header目录下面index中布局，我们在这里面获取到login的数据值
-
然后我们需要在this.props（从父组件中传递过来的对象）中引入login
-
在布局下面写一个判断语法，如果当前的login是true也就是登录状态，那就显示退出，反之显示登录
-
我们看一下效果
6.当我们没有登录的时候，点击登录我们就会跳转到登录页面，在header目录下的index中，我们使用link进行页面跳转
7.现在进行登录页面的逻辑设计,需要获取到在input框中输入的内容，通过ref，将this.account和this.password指向我们输入的内容，然后传递给login方法，
在mapDispatch中，我们定义两个参数，accountElem和passwordElem表示输入框对象
8.然后通过dispatch派发请求，具体的派发事件逻辑在actionCreators中完成
在actionCreators中;
`import axios from ‘axios’;
import * as actionTypes from ‘./actionTypes’;
const changeLogin = () => ({
type: actionTypes.CHANGE_LOGIN,
value:true,
})
export const login = (accout, password) => {
return (dispatch) => {
axios.get(’/api/login.json?accout=’ + accout + ‘&password=’ + password).then(
(res) => {
const result = res.data.data;
if (result) {
dispatch(changeLogin())
} else {
alert(‘登录失败’)
}
}
)
}
}`
在reducer中处理数据
怎么实现在登录成功之后跳转到首页
点击退出怎么实现退出功能：
在header文件夹下面的index文件中找到退出按钮，给它绑定一个单击事件：
在header目录下，使用logout，并且定义loginActionCreators来派发
派发出去之后，我们在login目录下的actionCreators进行具体操作
reducer中处理数据
