redux简单的使用过程及流程

二.redux的使用

1. redux使用过程

安装redux：

npm install redux --save
或
yarn add redux

通过创建一个简单的js文件，先来简单学习一下redux：

1.2.搭建项目结构

1.2.1 创建一个新的项目文件夹：learn-redux

执行初始化操作
yarn init

安装redux
yarn add redux

1.2.2 创建src目录，并且创建index.js文件

1.2.3 修改package.json可以执行index.js

"scripts": {
   
  "start": "node src/index.js"
}

通过修改之后就不用使用node index.js执行，只需要yarn start

修改packages.json

1.3.开始在index.js中编写代码

1.3.1.创建一个对象，作为我们要保存的状态：

const redux = require('redux');

const initialState = {
   
  counter: 0
}

1.3.2.创建Store来存储这个state

• 创建store时必须创建reducer；
• 我们可以通过 store.getState 来获取当前的state

// 创建reducer
const reducer = (state = initialState, action) => {
   
  return state;
}

// 根据reducer创建store
const store = redux.createStore(reducer);

console.log(store.getState());

1.3.3.通过action来修改state

• 通过dispatch来派发action；
• 通常action中都会有type属性，也可以携带其他的数据；

store.dispatch({
   
  type: "INCREMENT"
})

store.dispath({
   
  type: "DECREMENT"
})

store.