react-redux使用

使用前得需要安装

npm i --save react-redux redux redux-thunk

• 1

1. 先创建actions

获取用户列表的相关操作.

// src/actions/users/index.js import * as usersTypes from '../../constants/users/ActionTypes'; export const queryUsersSuccess = users => ({ type: usersTypes.QUERY_USERS_SUCCESS, users }) export const queryUsers = () => { return dispatch => { MyFetch.get(`v1/users`).then(data => { dispatch(queryUsersSuccess(data.users)) }) } }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

// MyFetch.js import { message } from 'antd'; const API_URL = process.env.REACT_APP_DEV_API_URL var Fetch = { get(path) { return new Promise((resolve, reject) => { fetch(`${API_URL}/${path}`, { headers: new Headers({ 'token': localStorage.getItem("my-custom-token"), 'Accept': 'application/json', 'Content-Type': 'application/json', }) }).then(res => { return handleStatus(res); }) .then(json => { resolve(json); }) .catch(err => { reject(err); }); }); }, post(params) {}, ... } function handleStatus(res) { let errors; switch (res.status) { case 200: return res.json(); case 500: console.log("500错误"); message.error('服务器内部错误', 5) errors = `${res.status}, ${res.statusText}` throw errors case 404: message.error("资源不存在", 5) errors = `${res.status}, ${res.statusText}` throw errors case 401: message.error("登录会话过期,请重新登录", 5) localStorage.removeItem("my-custom-token") window.location.href = '/login' break; case 403: message.error("无权限访问", 5) errors = `${res.status}, ${res.statusText}` throw errors default: } }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

• 30

• 31

• 32

• 33

• 34

• 35

• 36

• 37

• 38

• 39

• 40

• 41

• 42

• 43

• 44

• 45

• 46

• 47

• 48

• 49

• 50

• 51

• 52

• 53

1. 创建constants

// src/constants/users/ActionTypes.js export const QUERY_USERS = 'QUERY_USERS' export const QUERY_USERS_SUCCESS = "QUERY_USERS_SUCCESS"

• 1

• 2

• 3

1. 创建 reducers相关

// src/reducers/users.js import {QUERY_USERS_SUCCESS} from "../constants/users/ActionTypes"; const initState = { users: [] } export default function users(state = initState, action) { console.log("Welcome to reducer users"); switch (action.type) { case QUERY_USERS_SUCCESS: return { ...state, users: action.users } default: return state } }

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

// src/reducers/index.js import { combineReducers } from 'redux' //BASE API import users from './users' const rootReducer = combineReducers({ users, }) export default rootReducer

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

这里创建了相关的reducers.

1. 在根组件store

// src/index.js import React from 'react'; import { Provider } from 'react-redux' import configureStore from './configureStore'; import ReactDOM from 'react-dom'; import App from './App'; const store = configureStore() ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );

• 1

• 2

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
7DxMMQIL-1715830582119)]

[外链图片转存中…(img-OZxm2QR6-1715830582120)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！