简单登录注册例子实现redux功能

以登录存贮账号密码为例：

actions部分：

actions/login.js：

export function updateAccount(value) { 
    return {
        type: 'UPDATE_ACCOUNT',
        value
    }
}

export function updatePsW(value) {
    return {
        type: 'UPDATE_PASSWORK',
        value
    }
}

---

 

 reducers部分：

 reducers/login.js

const stateData = {
    'account': 'admin',
    'passWork':'123456'
}
const login = (state = stateData, action) => { 
    switch (action.type) { 
        case 'UPDATE_ACCOUNT':
            return Object.assign({}, state, { 'account': action.value})
        case 'UPDATE_PASSWORK':
            return Object.assign({}, state, { 'passWork': action.value })
        default:
            return state
    }
}
export default login

---

redux/index.js： 

import { combineReducers } from 'redux'
import login from './reducers/login' //写法就是单个redux写法,每个功能写一个

const reducer = combineReducers({
    login
})

export default reducer

---

入口文件：

import React from 'react'
import ReactDOM from 'react-dom'
import '@/styles/index.scss'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from '@/redux'
import Routers from '@/router/index'

const store = createStore(reducer)
ReactDOM.render(
  <Provider store={store}>
    <Routers />
  </Provider>,
  document.getElementById('root')
)

---

 登录组件：

import React, { Component } from 'react'
import './login.scss'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as loginActions from '@/redux/actions/login'

 class Login extends Component {
                 constructor(props) {
                   super(props)
                   this.handleAccount = this.handleAccount.bind(this)
                   this.handlePW = this.handlePW.bind(this)
                   this.handleSubmit = this.handleSubmit.bind(this)
                 }
                 handleAccount(e) {
                   this.props.actions.updateAccount(e.target.value )
                 }
                handlePW(e) {
                  this.props.actions.updatePsW(e.target.value)
                 }
                handleSubmit() { 
                    alert('提交表单')
                }
                 render() {
                   return (
                       <div>
                         <div className="title">
                         <h1>React</h1>
                         </div>
                         <div className="content">
                           <div>
                             <label htmlFor="">账号：</label>
                             <input
                               type="text"
                               value={this.props.state.account}
                               placeholder="请输入账号"
                               onChange={this.handleAccount}
                             />
                           </div>
                           <div>
                             <label htmlFor="">密码：</label>
                             <input
                               type="passwork"
                               value={this.props.state.passWork}
                               placeholder="请输入密码"
                               onChange={this.handlePW}
                             />
                           </div>
                           <div>
                             <button
                                 type="button"
                                 onClick={this.handleSubmit}
                               >
                                 登录
                               </button>
                           </div>
                         </div>
                       </div>
                   )
                 }
               }
//需要渲染什么数据
function mapStateToProps(state) {
  console.log(state,'====Login-dtate')
  return { state:state.login}
}
//1、不使用bindActionCreators时候：
// function mapDispatchToProps(dispatch) {
//   console.log(dispatch, '====Login-Dispatch000000')
//   return {
//     updateAccount: (value) => dispatch({ type: 'UPDATE_ACCOUNT', value}),
//     updatePW: (value) => dispatch({ type: 'UPDATE_PASSWORK', value }),
//   } 
// }
// 2、通过把aciont和dispatch链接起来
function mapDispatchToProps(dispatch) {
  console.log(dispatch, '====Login-Dispatch000000')
  return {
    actions: bindActionCreators(loginActions,dispatch)
  }
}
export default connect(mapStateToProps , mapDispatchToProps)(Login);

即可实现登录账号密码的状态存储