入门 redux 和 @connect 装饰器

客官°小女子只卖身不卖艺 2023-01-19 09:55 137阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![8e4a4768d03e5f5468573352b01e7ab8.png][]

# 来源：北孤清茶 #

https://juejin.cn/post/6953866924065292318

首先第一步利用脚手架创建一个项目，命令是：`create-react-app my_redux`；

接着安装redux，命令：`npm install \--save redux react-redux redux-thunk`；

## Redux有三大原则 ##

### 单一数据源 ###

整个应用的 `state` 被储存在一棵 `object tree` 中，并且这个 `object tree` 只存在于唯一一个 `store` 中。

### State 是只读的 ###

唯一改变 `state` 的方法就是触发 `action`，`action` 是一个用于描述已发生事件的普通对象。

### 使用纯函数来执行修改 ###

为了描述 `action` 如何改变 state tree ，我们需要编写 `reducer`。

接下来我们删除src下多余文件，只留下`app.js`和`index.js`,创建`store`文件夹,并创建我们需要的js文件，此时src目录下应该是这些文件

### 以todoList为例 ###

使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了，就可以知道为什么变。action 就像是描述发生了什么的指示器。  
**`action.js`**

//把需要操作的方法导出去
    export const addTodo = (data) => {
      return dispatch => {
        //告诉reducer类型，reducer根据不同的类型做不同的操作
        dispatch({ type: 'ADD_TODO', data })
      }
    }
    export const delTodo = (index) => {
      return dispatch => {
        dispatch({type : 'DEL_TODO',index})
      }
    }
    复制代码

reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务。  
**`reduce.js`**

//创建唯一的初始化state,如果初始化元素比较多可以单独创建state.js方便管理
    const initState = {
      todoList : ['早上五点钟起床','锻炼身体一小时','做饭吃饭']
    }
    
    //编写reducer根据不同的类型做不同的操作修改state
    const reducer = (state = initState,action) =>{
      //state是只读，所以每次修改都返回一个新的state
      let newState = JSON.parse(JSON.stringify(state))
      switch(action.type){
        case 'ADD_TODO':
          newState.todoList.push(action.data);
          return newState;
        case 'DEL_TODO':
          newState.todoList.splice(action.index,1);
          return newState;
        default:
          return newState;
      }
    }
    
    export default reducer
    复制代码

创建store实例  
**`store \-> index.js`**

// applyMiddleware: redux通过该函数来使用中间件
    // createStore: 用于创建store实例
    import {createStore,applyMiddleware} from 'redux'
    //thunk中间件可以支持异步action
    import thunk from 'redux-thunk'
    import reducer from './reducer'
    const store = createStore(reducer,applyMiddleware(thunk))
    export default store
    复制代码

至此，我们已经完成了所有使用Redux的准备工作，接下来就在React组件中使用Redux  
首先编写入口文件`index.js`

import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
     引入创建好的store实例
    import store from './store'
    // Provider是react-redux两个核心工具之一，作用：将store传递到每个项目中的组件中
    import {Provider} from 'react-redux'
    
    ReactDOM.render(
      <Provider store={store}>
        {/* 将store作为prop传入，即可使应用中的所有组件使用store */}
        <App />
      </Provider>,
      document.getElementById('root')
    );
    复制代码

最后`app.js`

import React, { Component } from 'react'
    // connect方法的作用：将额外的props传递给组件，并返回新的组件，组件在该过程中不会受到影响
    import { connect } from 'react-redux'
    // 引入action
    import {addTodo,delTodo} from './store/action'
    class App extends Component {
      state = {
        value : ''
      }
      changeValue = (e) =>{
        this.setState({
          value : e.target.value,
        })
      }
      addTodoFn = () =>{
        //触发addTodo添加备忘的action
        this.props.addTodo(this.state.value)
        this.setState({
          value :''
        })
      }
      delTodoFn = (index) =>{
        //触发delTodo删除备忘的action
        this.props.delTodo(index)
      }
      render() {
        return (
          <div>
            <ol>
              {this.props.todoList.map((item,index)=>(
                <li key={index} onClick={this.delTodoFn.bind(this,index)}>{item}</li>
              ))}
            </ol>
            <input type="text" value={this.state.value} onChange={this.changeValue}/>
            <button onClick={this.addTodoFn}>添加</button>
          </div>
        )
      }
    }
    // mapStateToProps：将state映射到组件的props中
    const mapStateToProps = (state) => ({
      todoList : state.todoList
    })
    // mapDispatchToProps：将action里的dispatch映射到组件的props中
    const mapDispatchToProps = {
      addTodo,
      delTodo
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(App)
    
    复制代码

## @connect装饰器 ##

装饰器可以让代码写起来更顺手，看起来也简洁一点，

1.      在命令行执行命令 `npm run eject`。如果报错的信息大概意思是：有些文件未被追踪到，那么直接`git add .` 再 `git commit -m`""，或者直接在`.gitignore`中忽略这些文件\(不建议\);
2.      之后`package.json`中会出现很多依赖建议`yarn/npm i` 一下,防止网速不好出现丢包现象;
3.      然后打开`package.json`文件,找到`"babel"`开头的一个对象,\(一般在最后,\),这是原始的样子:

"babel": {
        "presets": [
          "react-app"
        ]
      }
    复制代码

加入另外一项：

"babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ]
        ]
      }
    复制代码

最后重启项目就可以了，一定要重启项目不然可能会报错`Support for the experimental syntax 'decorators-legacy' isn't currently enabled (6:1):`  
然后就可以使用@conncet装饰器了，把`app.js`可以修改如下：

import React, { Component } from 'react'
    import { connect } from 'react-redux'
    import {addTodo,delTodo} from './store/action'
    //直接在class上一行，接收两个参数，跟之前的写法差不多，第一个参数是需要用的state，第二个参数是需要用的action
    @connect(state=>({
      todoList : state.todoList
    }),{addTodo,delTodo})
    class App extends Component {
      state = {
        value : ''
      }
      changeValue = (e) =>{
        this.setState({
          value : e.target.value,
        })
      }
      addTodoFn = () =>{
        //触发addTodo添加备忘的action
        this.props.addTodo(this.state.value)
        this.setState({
          value :''
        })
      }
      delTodoFn = (index) =>{
        //触发delTodo删除备忘的action
        this.props.delTodo(index)
      }
      render() {
        return (
          <div>
            <ol>
              {this.props.todoList.map((item,index)=>(
                <li key={index} onClick={this.delTodoFn.bind(this,index)}>{item}</li>
              ))}
            </ol>
            <input type="text" value={this.state.value} onChange={this.changeValue}/>
            <button onClick={this.addTodoFn}>添加</button>
          </div>
        )
      }
    }
    //用@connect装饰器一定要以这种方式导出，不然报错，具体什么原因我还没找到
    export default App
    
    复制代码

## 调试工具插件 ##

`window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__`  
在redux中添加这个插件是在chrome浏览器可以看到state的每一步流程，更加清晰，在store下index.js中添加修改

import {createStore,applyMiddleware,compose} from 'redux'
    import thunk from 'redux-thunk'
    import reducer from './reducer'
    const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        }) : compose;
    
    const enhancer = composeEnhancers(
      applyMiddleware(thunk),
      // other store enhancers if any
    );
    const store = createStore(reducer, enhancer);
    export default store
    复制代码

![80416953ab9378ba459e9f8fe346eb9e.png][]

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[8e4a4768d03e5f5468573352b01e7ab8.png]: /images/20221021/f2ce516bca544749962531228b957392.png
[80416953ab9378ba459e9f8fe346eb9e.png]: /images/20221021/899eba415ec348ad8a40442febe7d81f.png