redux简单介绍

个人学习笔记

目录

个人学习笔记

基本组成

一、store对外提供一个操作的store

二、在deal.js(reducer.js)文件中写逻辑代码

三、active.js

四、使用 (注意active的使用)

五、异步处理 

---

基本组成

• store 中转站
• reducer 处理操作
• acticve 生成reducer 能处理的数据

一、store对外提供一个操作的store

import {createStore} from 'redux'
import countReder from './deal.js'

export default createStore(countReder)

二、在deal.js(reducer.js)文件中写逻辑代码

• 在store分配行为的时候会给deal分配两个参数 predata是我们自己的数据  active 行为操作 会携带两个参数(type,data) ，这里的active实际就是我们自己封装的会在store.dispatch的时候传递过来的(看代码)
• deal 就是处理操作的js文件 active有两个参数 操作的函数 和 携带数据】
• 执行什么函数 自己判断一下

import {DELETCOUNT,ADDCOUNT,INSERTNAME} from './Name.js'

const initData = {
            name:'test',
            count:1,
        }

// preCount 是我们自己的数据
// active 就是store.dispatch 传递过来的active 
// 有两个参数{type,data} 如下文的使用

function countRender(preCount = initData,active){
    const {type,data} = active;
    switch(type){
        case DELETCOUNT:
            return preCount.count - data;
        case ADDCOUNT:
            return preCount.count + 2;
        case INSERTNAME:
            return preCount.count + 3;
        case 'UPDATENAME':
            console.log('111');
           initData.name = data;
            return initData;
        default:
            return preCount;
        }


}

export default countRender;

三、active.js

这里会自动的生成deal.js 能处理的对象文件

import {ADDCOUNT,DELETCOUNT,INSERTNAME} from './Name.js'

export const ADDCOUNT1 = data =>({type:ADDCOUNT,data})

export const DELETCOUNT1 =data => ({type:DELETCOUNT,data})

export const INSERTNAME1 = data => ({type:INSERTNAME,data})

export const UPDATENAME = data => ({type:'UPDATENAME',data})

在使用的时会通过调用这里代码自动生成active行为，注意这个文件不是必须有的，我们可以自己去生成一个对象文件。

四、使用 (注意active的使用)

import store from '../../store/store'
import {UPDATENAME} from '../../store/active'

class Count extends React.Component{
    constructor(){
        super()
        this.state = store.getState();
    
        // 有组件的要订阅消息 页面数据更新
        store.subscribe(()=>{
            console.log(store.getState());
            this.setState(store.getState())
        })
    }
    state = {
        count:1
    }
    
    handleCount = ()=>{      
        // active 的作用就在这里 他会自动的生成deal能处理的对象 你也可以直接传入的             
        // deal能处理的对像 就不需要active.js 文件了
        // 这个对象会分发到deal.js 对应的形式参数是active 
        // 如 store.dispatch({type:UPDATENANE,name:'feifei'})
        store.dispatch(UPDATENAME('feifei'))
    }

    render(){
        return(
        // store.getState()获取store的数据
        <div onClick={this.handleCount}>{store.getState().name}</div>
        )
    }
}

export default Count;

五、异步处理 

在的deal中处理都是同步执行的数据 可是我们要请求数据的话 就需要在store中引入一部分的配置

import {createStore,applyMiddleware} from 'redux'
import countReder from './deal.js'

// 这里需要安装这个包 npm i redux-thunk
import thunk from 'redux-thunk'

// 与同步相比多了一个 applyMiddleware(thunk)
export default createStore(countReder,applyMiddleware(thunk))

异步函数的使用

import React, { Component } from 'react';
import store from '../store/store';


class Home extends Component {

    handleGet = ()=>{
        return ()=>{
                // 异步函数请求来的数据 为 list
                const active = {
                    type:'AddUser',
                    userData:list
                }
                store.dispatch(active)
             }
            
        
    }

    render() {
        return (
            <div onClick={this.handleGet}>
                这是home               
            </div>

        );
    }
}

export default Home;