redux的初始使用简单demo笔记

最近接手react项目，上个大佬没有引入redux，想着vue一直用vuex的，就试着在项目中引入了。

首先cnpm install redux

在项目中创建store.js这个看个人想在哪里创建就在哪里创建

此处是我的store.js代码

import { createStore, combineReducers} from ‘redux’ //引入

/**
*

• state是只读的，能改变state的唯一方式是通过触发action来修改

• /
  let storeInfo = function (state={},action) { //初始化redux
  return{
  user:{
  name:‘liqiang’
  }
  }
  }
  /*

• action顾名思义，action就是动作，也就是通过动作来修改state的值。也是修改store的唯一途径。
  action本质上就是一个普通js对象，我们约定这个对象必须有一个字段type，来表示我们的动作名称。一般我们会使用一个常量来表示type对应的值。
  此外，我们还会把希望state变成什么样子的对应的值通过action传进来，那么这里a

• ***/
  function project(state = storeInfo().user, action) { //改变数据并且返回
  switch (action.type) { //这个type是dispatch的时候创来的名字，必须全部大写如：AA_BB
  case ‘NAME’:
  return {
  …state,
  name: action.name
  }
  }

  return state
  }
  /***

Action 只是描述了有事情发生了这件事实，但并没有说明要做哪些改变，这正是reducer需要做的事情。
Reducer作为纯函数，内部不建议使用任何有副作用的操作，比如操作外部的变量，任何导致相同输入但输出却不一致的操作。
如果我们的reducer比较多，比较复杂，我们不能把所有的逻辑都放到一个reducer里面去处理，这个时候我们就需要拆分reducer。
幸好，redux提供了一个api就是combineReducers Api。
*
*

• /
  let rootReducer = combineReducers({
  project
  })
  /
• store是redux应用的唯一数据源，我们调用createStore Api创建store。
• ***/
  let store = createStore(rootReducer)

export default store; //曝光

---

我在我的login里面的按钮里面点击改变名字为李强
store.dispatch({
type: ‘NAME’,
name: ‘李强’
})
console.log(store.getState(),‘李强’)

下面是打印结果，开始redux里面定义的是liqiang