redux 的使用

Posted 2022-02-03 冰雪奇缘lb

1. 安装 redux

npm i redux

2. 创建一个 Action

在根目录下 (src) 创建一个文件夹action

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

const sendAction = () =>  ... ;

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

const sendAction = () => 
	return type: "send action", value: "发送了一个action"

• 把这个action创建函数进行导出

module.exports =  sendAction 

示例代码：

const sendAction = () => 
    // 返回一个 action 对象
    return 
        type: 'send action',
        value: '我是一个action'
    


module.exports = 
    sendAction

3. 创建一个 Reducer

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

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

const rootReducer = (state, action) =>  ... ;

• 第一个参数是默认状态，我们可以定义一个初始化的 state，然后进行赋值

const initstate =  value: "默认值"
const rootReducer = (state = initstate, action) =>  ... ;

• 在函数里面判断第二个参数 action 的 type 值是否是我们发送的
• 如果是的话，我们可以通过 return 返回新的 state
• 把 reducer 进行导出

/*
    这个文件是 创建 reducer 函数的，专门用来处理 发送过来的 action
*/
const initState = 
    value: '默认值'

const reducer = (state = initState, action) => 
    switch (action.type) 
        case 'send_type':
            
            return Object.assign(, state, action);
    
        default:
            return state;
    


module.exports = 
    reducer

4. 创建Store

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

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

import  createStore  from "redux";
const store = createStore (reducer);

• 我们需要导入刚刚创建的 reducer ，然后设置到函数里面去
• createStore 的返回值就是我们构建好的 store，然后进行导出

示例代码：

import  createStore  from "redux"

// 导入我们自己创建好的 reducer

import  reducer  from "../reducer"

// 构建 store

const store = createStore(reducer)

export default store

---

案例

在Home组件开始使用

• 给页面的 button 按钮绑定一个点击事件
• 在组件一加载完毕的时候我们通过 store 来进行监听器的注册，返回值可以用来注销监听

this.unSubbscribe = store.subscribe(() => ...);

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

handleclick = ()=> store.dispatch (sendAction()) ;