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({

})

(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>

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

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

</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>

<App />

</Provider>

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

redux和react-redux相关推荐

React+Redux系列教程
2019独角兽企业重金招聘Python工程师标准>>> 参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址: ...
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程（97 个视频）
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程(97 个视频) mern 架构零基础开发完整电商网站 React + Redux + Expre ...
React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...
基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
react开发教程（十）redux结合react
描述 Redux 和 React 之间没有关系.Redux 可以搭配 React.Angular 甚至纯 JS.但是 Redux 还是比较适合和 React 搭配的,因为 React 允许你以 sta ...
React Redux 的一些基本知识点
一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...
【视频】React redux toolkit创建状态切片
React redux toolkit创建状态切片
react实战项目_React实战之React+Redux实现一个天气预报小项目
引言经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
React+Redux仿Web追书神器
引言由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件搞清楚,数 ...

redux和react-redux

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

redux和react-redux相关推荐

最新文章

热门文章