React-redux的简单拆分与使用

最新推荐文章于 2023-09-09 10:59:53 发布

_风闲

最新推荐文章于 2023-09-09 10:59:53 发布

阅读量261

点赞数

文章标签： react

本文链接：https://blog.csdn.net/ZQihang/article/details/105744585

版权

本文介绍了React-Redux的使用，包括Redux的三大基本原则：单一数据源、只读状态和纯函数更新。详细讲解了如何安装配置Redux，创建reducer、store和actions文件夹，并在页面中派发action，实现状态管理。

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

1.介绍

redux: 状态管理工具
store: 一个项目只会有一个store
redux数据流: view用户界面(onClick)操作 => action(动作) => reducer(修改state)

2.Redux三大基本原则

store单一数据源
state在页面里是只读的，触发action => 修改state
state只能在reducer里面修改，并且reducer必须是纯函数

3.安装配置

cnpm i down -S
redux
react-redux
redux-promise //可以让action实现异步请求
redux-thunk //可以让action以函数的形式书写

4.在src目录下创建reducer文件夹，内包含对应的js文件

const defaultState = {
  data: [],
  title: '我是list'
}

export default function listReducer(state = defaultState, action) {
  switch (action.type) {
    case 'FETCH_LIST_DATA':
      return { ...state, data: action.payload.result.list }
    default:
      return state
  }
}

5.在src目录下创建store.js文件

import { createStore, compose, combineReducers, applyMiddleware } from 'redux'
//promise可以让action实现异步的方式
import promise from 'redux-promise'
//thunk可以让action以函数的形式去写
import thunk from 'redux-thunk'
import List from '@/reducer/list'

//配合redux插件使用
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
  //合并reducer
  combineReducers({
    list:List
  }),
  composeEnhancers(applyMiddleware(thunk, promise))
)

export { store }

6.在src目录下创建actions文件夹，内包含对应的js文件

import { post } from '@/utils/request'
//这个是封装的axios和拦截器

export function getData (options) {
  return {
    type: 'FETCH_LIST_DATA',
    payload: post('数据接口')
  }
}

7.在页面级页面派发aciton

import React from 'react'
import { connect } from 'react-redux'
//引入action
import { getData } from '@/actions/list'


export default @connect(state => {
  return {
    //这里是从reducer返回过来的数据
    data: state.list.data,
    title: state.list.title
  }
}, {
  //这里放的是action
  getData
})

这里是一个class类写页面布局