redux和react-redux

（3）昨天学了redux，今天以登录案例再打了一遍，笔记做好，先来张图

（2）布局配置：actions文件夹负责所有的action.js，reducers文件夹负责所有的reducer.js

）

（3）定义一个contant.js,该模块是用于定义action对象中type类型的常量值

(4) 在actions里面定义专门为Login组件生成action对象:目的只有一个，便于管理的同时防止程序员单词写错

import {USER_TOKEN} from '../contant'

//同步action

export const user=(userInfo)=>({type:USER_TOKEN,data:userInfo})

异步action，留作参考

 （5）在reducers文件夹下定期reducer：该文件是用于创建一个为组件服务的reducer，reducer本质就是一个函数；

import { USER_TOKEN } from '../contant' //引入作为常量的，后期便于修改

const initState = {}//初始化状态

export default function loginReducer(previouseState=initState, action) {

    const { type, data } = action

    switch(type){

        case USER_TOKEN:

            return data

        default:

            return initState

    }

}

（6）在redux文件夹下定义index.js:该文件用于汇总所有的reducer为一个总的reducer

 //引入为login服务的reducer

import login from './reducers/login'

//combineReducers合并所有reducer变为一个总的reducer,为对象

import {combineReducers } from 'redux'

export default combineReducers({

    login

})

(7) redux文件夹下定义store：该文件专门用于暴露一个store对象，整个应用只要一个store对象

//npm install redux-thunk --save 安装

//引入redux-thunk，用于支持异步action

import thunk from 'redux-thunk'

//引入createStore，专门用于创建redux中最为核心的store对象

import { createStore,applyMiddleware } from 'redux'//applyMiddleware执行中间介

//引入汇总之后的reducer

import  allReducer from  './index'

暴露applyMiddleware(thunk)，applyMiddlewares调用实例：返回store对象

export default createStore(allReducer,applyMiddleware(thunk))

//applyMiddlewares的作用：它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。

 

（8） 需要用到redux全局数据的组件内

import React, { Component } from 'react'

import '../../login.css'

//npm i react-redux --save 安装react-redux

import { connect } from 'react-redux'//引入connect用于连接UI组件和redux

//引入对应的action

import {user} from '../../redux/actions/Login'

 class Login extends Component {

    enter=()=>{

     const {value:useName}=this.useName

        const {value:usePassword}=this.usePassword

      console.log(this.props.userState);

      console.log(this.props.user({useName,usePassword}));

      console.log(this.props.userState);

    }

    render() {

        return (

            <div className='logon'>

                <div>

                    <h1>登录</h1>

                    <input className='uses' ref={c => this.useName = c} type="text" placeholder='请输入用户名' /> <br />

                    <input className='uses' ref={c => this.usePassword = c} type="text" placeholder='请输入密码' /> <br />

                    <input type="checkbox" /><span>记住密码</span> <br />

                    <button onClick={this.enter}>登录</button>

                </div>

            </div>

        )

    }

}

export default connect(//UI组件包含组件

    state => ({userState:state.login}),

    {user}

)(Login)

 （9）Provider 包住App组件

mport  store  from './redux/Store'

import { Provider } from 'react-redux'//给所有的容器组件提供store

console.log(store);

ReactDOM.render(

  <React.StrictMode>

    <Provider store={store}>

      <App />

    </Provider>

 

 仅作参考：作为以后自己的笔记