redux学习二

终极redux

npm i react-redux

1，main.tsx 

引入

import { Provider } from "react-redux"
import store from "./store"

改写

ReactDom.render(
    <Provider store={store}>
        <App></App>
    </Provider>
    , document.getElementById("root"))

2，在srcz中新建 store 文件夹 再建一个index.tsx  文件 里面写入

 

引入 

import { createStore, combineReducers } from "redux"
import numRudcer from "../reducers/numreducers"
import flagRudcer from "../reducers/flagreducers"

   改写

    

let store = combineReducers({
    numInfo: numRudcer,
    flagInfo: flagRudcer
})

export default createStore(store)

3.在src中新建 action文件夹 再建一个actiontype.tsx  文件 里面写入

export default {
    "Delete": "Delete"
}

在新建useraction.tsx 写入

import actiontype from "./actiontype"


let del = (playload: any) => {
    return {
        type: actiontype.Delete,
        playload
    }
}

let add = (playload: any) => {
    return {
        type: actiontype.ADD,
        playload
    }
}

export { del, add }

这个写的是给页面用   作用是用来触发actio并且传参数到action  这个参数从页面过来 也相当于同步方法 用来操作数组  

页面的用法 

引入 

import { del, add } from "../action/useraction"

注册

const mapDispatchToProps = {
    del, add
}

使用

this.props.del(item.id)

4,在src中新建 reducers文件夹 再建一个userlistreducers.tsx  文件  这个就是全局数据声明的地方 里面写入 之后在在router 中的indnex.tsx 引入一下

import actiontype from "../action/actiontype"
let userlist = {
    list: [
        {
            id: 1,
            username: "lala",
            userpwd: "huhu"
        },
        {
            id: 2,
            username: "jiji",
            userpwd: 123
        }
    ]
}
let userlistreducers = (state = userlist, action: any) => {
    switch (action.type) {
        case actiontype.Delete:
            return {
                list: state.list.filter(item => item.id != action.playload)
            }

        case actiontype.ADD:
            return {
                list: [...state.list, action.playload]
            }
    }



    return state
}

export default userlistreducers

引入到store中 index.tsx

import { createStore, combineReducers } from "redux"
import userlistreducers from "../reducers/userlistreducers"
import flagreducers from "../reducers/flagreducers"
let store = combineReducers({
    userinfo: userlistreducers,
    flaginfo: flagreducers

})
export default createStore(store)

使用全局的数据

const mapStateToProps = (state: any) => ({
    list: state.userinfo.list
})

使用

this.props.list.map