初试 redux 的操作

最新推荐文章于 2024-04-23 17:01:21 发布

zhooson

最新推荐文章于 2024-04-23 17:01:21 发布

阅读量292

点赞数

分类专栏： redux 文章标签： redux

本文链接：https://blog.youkuaiyun.com/Zhooson/article/details/80705612

版权

redux 专栏收录该内容

2 篇文章

订阅专栏

使用官方的脚手架

    npm install -g create-react-app
    create-react-app my-app
    npm start
    npm install redux --save

删除的src／* 的文件，创建一个的index.js的文件
index.js的内容

import { createStore} from 'redux'

const ADD = 'add'
const REMOVE = 'remove'


// 通过reducer建立
function counter (state=0,action) {
    switch (action.type){
        case ADD:
            return state+1
        case REMOVE:
            return state-1
        default:
            return 10
    }
}
// 新建store
const store = createStore(counter)

// 获取当前的state
const init = store.getState()
console.info('init',init)


function listener () {
    const  current = store.getState()
    console.info(`当前为${current}`)
}
// 订阅事件 打印每次出现的数据
store.subscribe(listener)

// 派发事件
store.dispatch({ type:ADD })
console.info(store.getState())

store.dispatch({ type:ADD })
console.info(store.getState())

store.dispatch({ type:REMOVE })
console.info(store.getState())