React ------ redux的安装及基础使用流程（带案例）

最新推荐文章于 2024-09-11 09:19:49 发布

a～你我

最新推荐文章于 2024-09-11 09:19:49 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/x415329/article/details/93133700

版权

本文介绍了如何在React应用中集成Redux，通过一个todolist案例展示Redux的使用流程，包括安装Redux、创建store、state、reducer，定义actionCreators并在组件中触发更新，以及如何在组件中订阅store进行数据同步。

摘要由CSDN通过智能技术生成

redux

redux也是一个架构思维，在这个架构思维中 React 充当是视图 V

redux使用流程 ( todolist – 增加一条数据 )

1.redux是一个架构思维，我们实现需要一个工具，这个工具叫做redux
2.安装redux

$ yarn add redux

3.在src下新建一个store,store中新建index.js用来打造store

  import {
    createStore } from 'redux'
  import reducer from './reducer'

  const store = createStore( reducer ) // 不加new   createStore() 参数不是一个 Object 而是一个Function

  export default store

4.在store下新建一个state

  const state = {
   
    todos: [
      {
   
        id: 1,
        task: '任务一'
      }
    ]
  }
  export default state

5.在 store下新建一个 reducer

  import state from './state'
  const reducer = ( previousState = state , action ) => {
   
    const newState = {
   
      ...previousState           // 解构的原因是为了做深拷贝，我们操作newState，不会影响state
    }
    return newState
  }

  export default reducer