22-Redux-1

news2025/2/27 17:21:14


//npm init
//npm install redux
//1 导入redux（不能通过es6的方式）
// commonjs一种 -> node.js

const redux = require('redux')

const initialState = {
  counter: 0
}
// reducer
function reducer(state = initialState, action) {
  switch(action.type) {
    case "INCREMENT":
      return { ...state, counter: state.counter + 1 }
    case "DECREMENT":
      return { ...state, counter: state.counter - 1 }
    case "ADD_NUMBER":
      return { ...state, counter: state.counter + action.num }
    case "SUB_NUMBER":
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}

//store
const store = redux.createStore(reducer)

//订阅store的修改
store.subscribe(() => {
  console.log("state发生了改变", "counter:", store.getState().counter)
})

//actions
const action1 = { type: "INCREMENT" }
const action2 = { type: "DECREMENT" }
const action3 = { type: "ADD_NUMBER", num: 5 }
const action4 = { type: "SUB_NUMBER", num: 12 }

//派发 action
store.dispatch(action1)
store.dispatch(action2)
store.dispatch(action3)
store.dispatch(action4)

升级版本脱离react直接使用

index.js

import store from './store/index.js'
import { addAction, subAction, inAction, deAction } from './store/actionCreators.js'

store.subscribe(() => {
  console.log(store.getState())
})


store.dispatch(addAction(10))
store.dispatch(subAction(5))

store.dispatch(inAction())
store.dispatch(deAction())

store文件夹

actionCreator.js


import {  ADD_NUMBER, SUB_NUMBER, INCREMENT, DECREMENT   } from './constants.js'

export const addAction = (num) => {
  return {
    type: ADD_NUMBER,
    num,
  }
}
export const subAction = (num) => {
  return {
    type: SUB_NUMBER,
    num,
  }
}

export const inAction = () => {
  return {
    type: INCREMENT,
  }
}

export const deAction = () => {
  return {
    type: DECREMENT,
  }
}

constants.js

export const ADD_NUMBER = "ADD_NUMBER";
export const SUB_NUMBER = "SUB_NUMBER";
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

index.js



import redux from 'redux'

import reducer from './reducer.js'

const store = redux.createStore(reducer)

export default store

reducer.js

import {  ADD_NUMBER, SUB_NUMBER, INCREMENT, DECREMENT   } from './constants.js'

const defaultState = {
  counter: 0
}

function reducer(state = defaultState, action) {
  switch(action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    case INCREMENT:
      return { ...state, counter: state.counter + 1 }
    case DECREMENT:
      return { ...state, counter: state.counter - 1 }
    default:
      return state
  }
}

export default reducer