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

尾声

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。 整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

最后想要拿高薪实现技术提升薪水得到质的飞跃。最快捷的方式，就是有人可以带着你一起分析，这样学习起来最为高效，所以为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。

当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的。

进阶学习视频

附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题 （含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
的。

进阶学习视频

[外链图片转存中…(img-suKCGhlq-1715591053017)]

附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题 （含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

[外链图片转存中…(img-0OaCcbxL-1715591053018)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！