react redux demo

//constants.js

// 定义常量

export const ADD_COUNT = 'ADD_COUNT';

export const SUB_COUNT = 'SUB_COUNT';

export const APPEND = 'APPEND';

export const REMOVE = 'REMOVE';

//action.js

import {

ADD_COUNT,

SUB_COUNT,

APPEND,

REMOVE

} from './constants';

// 利用action来修改状态

export const addAction = (num)=>{

return {type:ADD_COUNT, num: num};

};

export const subAction = (num)=>{

return {type:SUB_COUNT, num: num};

};

export const append = ()=>{

return {type:APPEND};

};

export const remove = ()=>{

return {type:REMOVE};

//personReducer.js

import {APPEND,REMOVE} from './constants'

// 1.定义一个状态（数据）

let initialState = {

name: 'Tom'

}

// 利用reducer将store和action串联起来

function personReducer(state = initialState, action){

console.log(state,action)

switch(action.type){

case APPEND:

return { name: state.name +'sb1'};

case REMOVE:

return { name: state.name + 'sb2'};

default:

return state;

}

}

export default personReducer

//reducerNum.js

import {ADD_COUNT,SUB_COUNT} from './constants'

// 1.定义一个状态（数据）

let initialState = {

count: 0

}

// 利用reducer将store和action串联起来

function reducerNum(state = initialState, action){

console.log(state,action)

switch(action.type){

case ADD_COUNT:

return { count: state.count + action.num};

case SUB_COUNT:

return { count: state.count + action.num };

default:

return state;

}

}

export default reducerNum

//reducer.js

import {combineReducers } from 'redux'

import reducerNum from './reducerNum';

import personReducer from './personReducer'

const reducers = combineReducers({

reducerNum,

personReducer

});

export default reducers;

 

//store.js

import { createStore } from 'redux'

import reducers from './reducer'

// 利用store来保存状态（state）

const store = createStore(reducers);

export default store

//Rudexpage.js 使用redux

import React,{useEffect,useState} from 'react'

import store from '../redux/store'

import {addAction,subAction,append,remove} from '../redux/action'

export default function Rudexpage() {

const [count,setCount] =useState(store.getState().reducerNum.count)

const [name,setName] =useState(store.getState().personReducer.name)

useEffect(()=>{

store.subscribe(()=>{

setCount(store.getState().reducerNum.count)

setName(store.getState().personReducer.name)

})

})

const changeADD=(num)=>{

store.dispatch(addAction(5))

}

const changeremove=(num)=>{

store.dispatch(subAction(-5))

}

const changeAPPEND=()=>{

store.dispatch(append())

}

const changeREMOVE=()=>{

store.dispatch(remove())

}

return (

<div>

<div> 初始数据:{count}</div>

<div>修改后的数据{ store.getState().reducerNum.count}</div>

<button onClick={()=>changeADD(5)}>修改数据+5</button>

<button onClick={()=>changeremove(-5)}>修改数据-5</button>

<div> 初始数据:{name}</div>

<button onClick={()=>changeAPPEND()}>修改数据name</button>

<button onClick={()=>changeREMOVE()}>修改数据name</button>

 

</div>

)

}