原文合集地址如下,有需要的朋友可以关注
redux 概念
redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用,但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则,通过一个全局的状态树来管理应用程序的状态,从而使状态的变化更加可预测和已于维护。
redux的核心概念包括:
- Store: redux 的状态储存仓库,包括整个应用程序的状态树。应用程序中的所有状态都保存在整个单一的状态树中。
- Action: 代表状态变化的对象。它是一个包含type字段的JavaScript对象,用于描述发生的事件类型,并可以携带一些额外的数据。
- Reducer:纯函数,用于处理状态变化。接受旧的状态和一个action作为参数,返回一个新的状态。
- Dispatch:将action发送到reducer的过程,通过调用store.dispatch(action)来触发状态的变化。
- Subscribe:用于注册监听器,当状态发送变化时,可以通过store.subcribe(listener)来执行回调函数。
下面时一个简单的redux示例代码:
// 引入Redux
const {
createStore } = require('redux');
// 定义初始状态和Reducer
const initialState = {
count: 0 };
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return {
...state, count: state.count + 1 };
case 'DECREMENT':
return {
...state, count: state.count - 1 };
default:
return state;
}
}
// 创建Redux store
const store = createStore(counterReducer);
// 订阅状态变化
store.subscribe(() => {
const currentState = store.getState();
console.log('Current state:', currentState);
});
// 触发状态变化
store.dispatch({
type: 'INCREMENT' }); // 输出:Current state: { count: 1 }
store.dispatch({
type: 'INCREMENT' }); // 输出:Current state: { count: 2 }
store.dispatch({
type: 'DECREMENT' }); // 输出:Current state: { count: 1 }
如何在项目中封装一个全局状态。
在使用create-react-app
创建的React项目中,可以使用redux
和react-redux
来封装和管理全局状态。以下是在create-react-app
项目中封装Redux并在需要的页面引入的步骤:
安装
redux
和react-redux
库:npm install redux react-redux
创建Redux store:
在项目的src
目录下创建一个名为store
的文件夹,并在该文件夹下创建一个index.js
文件,用于创建Redux store。
// src/store/index.js
import {
createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducer
const store = createStore(rootReducer);
export default store;
在上述代码中,使用createStore
函数创建了Redux store,并传入了根ReducerrootReducer
。
- 创建Reducers:
在src/store
文件夹下创建一个名为reducers.js
的文件,用于定义和组合所有的Reducers。
// src/store/reducers.js
import {
combineReducers } from 'redux';
// 导入其他Reducers,比如:
// import counterReducer from './counterReducer';
const rootReducer = combineReducers({
// 在这里将所有的Reducers组合起来
// counter: counterReducer,
});
export default rootReducer;
在这里,可以导入并组合所有的Reducers,如果你有多个Reducer,可以在这里添加并在combineReducers
函数中进行组合。
- 创建Actions:
在src/store
文件夹下创建一个名为actions.js
的文件,用于定义Redux的Actions。
// src/store/actions.js
// 定义Action Types
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
// 定义Action Creators
export const increment = () => ({
type: INCREMENT });
export const decrement = () => ({
type: DECREMENT });
在上述代码中,定义了两个Action Types和对应的Action Creators。
- 创建Reducer:
在src/store
文件夹下创建一个名为counterReducer.js
的文件,用于定义一个Reducer示例。
// src/store/counterReducer.js
import {
INCREMENT, DECREMENT } from './actions';
const initialState = {
count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return {
...state, count: state.count + 1 };
case DECREMENT:
return {
...state, count: state.count - 1 };
default:
return state;
}
};
export default counterReducer;
在上述代码中,定义了一个简单的counterReducer
,根据不同的Action Type来处理状态的变化。
- 在需要的页面引入Redux:
在你需要使用Redux的组件或页面中,可以使用react-redux
提供的Provider
组件将Redux store注入到应用中,使其在组件层次结构中的任何地方都可以访问全局状态。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {
Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={
store}>
<App />
</Provider>,
document.getElementById('root')
);
在上述代码中,使用Provider
组件将store
作为prop传递给应用的根组件App
。
- 在组件中使用Redux的状态:
现在你可以在需要的组件中使用Redux的状态了。通过react-redux
提供的useSelector
和useDispatch
等hooks,或者使用connect
函数,你可以在组件中访问和修改全局状态。
import React from 'react';
import {
useSelector, useDispatch } from 'react-redux';
import {
increment, decrement } from './store/actions';
const Counter = () => {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
return (
<div>
<h1>Counter: {
count}</h1>
<button onClick={
() => dispatch(increment())}>Increment</button>
<button onClick={
() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
在上述代码中,使用useSelector
获取counter
的状态,以及使用useDispatch
获取dispatch
函数,从而在组件中对状态进行修改。
connect函数
在react-redux
中,connect
函数是一个高阶函数(Higher-Order Function),它允许你将Redux的状态和dispatch函数作为props传递给React组件。使用connect
函数可以将组件与Redux store连接起来,从而让组件可以访问和修改全局状态。
在React中,有两种方式可以访问和使用Redux的状态:
- 使用Hooks(推荐):
react-redux
提供了一些Hooks,如useSelector
和useDispatch
。使用Hooks的方式更加简洁,直接,而且是React的新特性。可以在函数式组件中使用这些Hooks来获取Redux的状态和dispatch函数,例如:
import React from 'react';
import {
useSelector, useDispatch } from 'react-redux';
import {
increment, decrement } from './store/actions';
const Counter = () => {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
return (
<div>
<h1>Counter: {
count}</h1>
<button onClick={
() => dispatch(increment())}>Increment</button>
<button onClick={
() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
- 使用
connect
函数(旧版方式):在较早版本的react-redux
中,Hooks可能不可用或者不适用于类组件,此时可以使用connect
函数来实现连接。connect
函数可以将Redux的状态和dispatch函数映射到组件的props上,这样组件就能够通过props来访问和修改Redux的状态。
import React from 'react';
import {
connect } from 'react-redux';
import {
increment, decrement } from './store/actions';
class Counter extends React.Component {
render() {
const {
count, increment, decrement } = this.props;
return (
<div>
<h1>Counter: {
count}</h1>
<button onClick={
increment}>Increment</button>
<button onClick={
decrement}>Decrement</button>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
count: state.counter.count
};
};
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch(increment()),
decrement: () => dispatch(decrement())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
在上述代码中,使用connect
函数将Redux的状态映射到组件的props中,并定义了mapStateToProps
和mapDispatchToProps
函数来进行映射。
总结:
使用connect
函数是较早版本react-redux
的一种实现方式,而使用Hooks的方式则是React的新特性,更加简洁和方便。如果你使用的react-redux
版本较新,并且项目支持React Hooks,那么推荐使用Hooks的方式来访问和修改Redux的状态。如果项目需要兼容旧版本的react-redux
或需要在类组件中使用,那么可以考虑使用connect
函数的方式。