redux基础

• redux组成

  • state 状态
  • action 事件
    1. 本质是一个JS对象
    2. 必须包含type属性
    3. 只是描述了有事情要发生，并没有描述如何去更新state(reducer去做)
  • Reducer
    1. 本质是一个函数
    2. 响应发送过来的action(其实就是处理action)
    3. 函数接收两个参数，第一个是初始化的state，第二个是发送过来的action
    4. 必须要有返回值
  • store
    1. 用来把action和reducer联系起来的
    2. 用createStore来构建store
    3. 用subscribe来注册监听(组件想要接收数据就得用这个)
    4. 通过dispatch来发送action

• 案例

  1. 创建一个action

     • 在根目录中创建一个action文件夹

     • 在该目录下创建一个index.js，用来构建Action

       const sendAction = () => {...}
       

     • 在action创建的函数里面，利用return，返回一个action对象，注意 也要携带type属性

       const sendAction = () => {return {
         type:'send_action',
         value:'发送了一个action'
       }}
       

     • 把action这个创建函数导出

       module.exports = {sendAction}
       

  2. 创建一个reducer

     • 在根目录创建一个reducer文件夹

     • 在该目录下创建一个index.js，用来构建reducer，注意 reducer要接受两个参数

       const rootReducer = (state,action) => {...}
       

     • 第一个参数是默认状态，可以初始化一个state，对其进行赋值

       const defaultState = '默认值'
       const rootReducer = (state=defaultState,action) => {...}
       

     • 在函数中判断第二个参数action的type值是否是要发送的

     • 如果是，那么就return返回一个新的state

     • 最后把reducer导出

  3. 创建store

     • 在根目录创建一个store文件夹

     • 在该目录下创建一个index.js，用来构建store，注意 createStore函数里面第一个参数接受的是reducer

       import {createStore} from 'redux'
       const store = createStore(reducer)
       

     • 需要导入刚刚创建的reducer，设置到createStore函数里去

     • createStore的返回值就是刚刚那个创建好的store，然后进行导出

  4. 在组件中去使用

     • 给页面的button绑定一个点击事件

     • 在组件加载完成的时候，通过store来进行监听器的注册，返回值可以用来注销监听

       this.unSubbscribe = store.subscribe(() => {...})
       

     • 在点击事件处理函数中，通过store.dispatch来发送一个action

       handleClick = () => {store.dispatch(sendAction())}
       

  总结

  

  1. component通过store.dispatch()发送action给reducer

  2. reducer通过函数中的return的返回值，传递给store

  3. 组件通过store.subcribe()的回调函数接收数据