Redux基本使用

1.结构

1.1测试项目搭建

1.1.1安装

npm install redux --save 或者 yarn add redux

1.2.创建一个新的项目文件夹 

1.2.1初始化操作

npm init

1.2.2安装redux

npm install redux

1.2.3.创建src目录 并且创建index.js

2.代码演示

index.js

const {createStore}=require('redux')
// 初始化
const initialState={
    name:'redux',
    count:10
}
// 创建reducer
function reducer(state=initialState,action) { 
    // if...else
    // // 修改 action用来接收更新后的数据
    // if(action.type == "ModifyName"){
    //     return {...state,name:action.name}
    // }
    // else if(action.type == "ModifyCount"){
    //     return {...state,count:action.count}
    // }
    // // 修改的数据的基础上再添加一个数据
    // else if(action.type == "Num"){
    //     // count:state.count 因为第一个数据已经修改存储在stroe中所以不需要用action
    //     return {...state,count:state.count+action.num}
    // }
    // // 输出数据
    // return state
    
    // switch
    switch(action.type){
        case "ModifyName":return {...state,name:action.name}
        case "ModifyCount":return {...state,count:action.count}
        case "Num":return {...state,count:state.count+action.num}
        default: return state
    }
    
 }

//  创建store
const store=createStore(reducer)
module.exports=store

1.使用仓库里面的数据

const store = require('./store')
console.log(store.getState());

2.修改仓库里面的数据

const store = require('./store')
// 修改name
// const NameAction = {
//     type:'ModifyName',
//     name:'react'
// }
// store.dispatch(NameAction)
// console.log(store.getState());

NameAction = (name) => ({
    type: 'ModifyName',
    name
})
store.dispatch(NameAction('软件技术'))
console.log(store.getState());

// 修改数据
const CountAction = {
    type: 'ModifyCount',
    count: 111
}
store.dispatch(CountAction)
console.log(store.getState());

// 添加单个数据
// const NumAction = {
//     type:'Num',
//     num:20
// }
// store.dispatch(NumAction)
// console.log(store.getState());

// 添加多个数据
NumAction = (num) => ({
    type: 'Num',
    num
})
store.dispatch(NumAction(20))
console.log(store.getState());
store.dispatch(NumAction(40))
console.log(store.getState());

3.订阅仓库里面的数据

const store = require('./store')
// 修改name
const NameAction = {
    type:'ModifyName',
    name:'react'
}
store.dispatch(NameAction)
// console.log(store.getState());

// 订阅
const unsubscribe = store.subscribe(()=>{
    console.log('订阅数据',store.getState());
})

// NameAction = (name)=>({
//     type:'ModifyName',
//     name
// })
// store.dispatch(NameAction('软件技术'))
// console.log(store.getState());

// 修改数据
const CountAction = {
    type:'ModifyCount',
    count:111
}
store.dispatch(CountAction)
// console.log(store.getState());

// 添加单个数据
// const NumAction = {
//     type:'Num',
//     num:20
// }
// store.dispatch(NumAction)
// console.log(store.getState());

// 添加多个数据
NumAction = (num)=>({
    type:'Num',
    num
})
store.dispatch(NumAction(20))
// console.log(store.getState());
store.dispatch(NumAction(40))
// console.log(store.getState());