什么是 Redux？
Redux 是一个流行的 JavaScript 应用程序状态管理库。 它可以帮助前端开发人员以可预测的方式管理自己的应用程序状态。 Redux 让你使用单向数据流来处理状态变化，便于测试和调试。
Redux 的三大原则是什么？
Redux 有三大原则：
- 单一数据源：整个应用程序的 state 被存储在一个单一的对象树中。
- 状态是只读的：不能直接修改 state，而是通过派发一个 action 来改变该 state。
- 变更由纯函数实现：为了描述 action 对 state 所做的修改，需要编写纯函数来处理这些 action。
Redux 中的 action 和 reducer 是什么？
Action
Action 是一个描述事件或行为的普通对象。它至少有一个 type 属性指定其类型，其他常常带有负载（payload）数据。
示例代码：
const addTodo = (text) => ({
type: 'ADD_TODO',
payload: {
text
}
});Reducer
Reducer 是一个纯函数，接收两个参数：旧 state 和 action。它将旧 state 和 action 处理成新的 state（即纯函数的输出结果）。
示例代码：
// www.javascriptcn.com code example
const todosReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.payload.text,
completed: false,
}
];
default:
return state;
}
}Reducers 应该是纯函数，如果你在 reducer 中改变了任何参数，会导致不可预期的问题。
如何_dispatch action？
使用 store.dispatch() 方法派发一个 action。
示例代码：
store.dispatch(addTodo('Go shopping'));如何创建一个 Redux store？
使用 Redux 提供的 createStore() 方法来创建一个 Redux store。createStore() 需要一个 reducer 作为参数。
示例代码：
import { createStore } from 'redux';
const store = createStore(todosReducer);如何在 React 中使用 Redux？
使用 react-redux connector 把 state 的数据和 dispatch 函数绑定到 React 组件的 props 上。
示例代码：
// www.javascriptcn.com code example
import { connect } from 'react-redux';
import { addTodo } from '../actions/todos';
class TodoForm extends React.Component {
submitHandler(event) {
event.preventDefault();
const text = this.newTodo.value.trim();
if (!text) {
return;
}
this.props.addTodo(text);
this.newTodo.value = '';
}
render() {
return (
<form onSubmit={this.submitHandler.bind(this)}>
<input type="text" ref={node => { this.newTodo = node; }} />
<button type="submit">Add Todo</button>
</form>
);
}
}
const mapDispatchToProps = dispatch => {
return {
addTodo: text => dispatch(addTodo(text)),
};
};
export default connect(null, mapDispatchToProps)(TodoForm);Redux 中间件是什么？
Redux 中间件是一个可以插入 store 的数据流中的代码。它可以用来处理异步操作、日志记录、错误处理以及其他帮助工具。
例如，redux-thunk 中间件可用于在Redux store上下文中运行异步操作：
示例代码：
// www.javascriptcn.com code example
const fetchPosts = () => {
return dispatch => {
dispatch({ type: 'FETCH_POSTS_PENDING' });
fetch('/posts')
.then(response => response.json())
.then(posts => {
dispatch({
type: 'FETCH_POSTS_SUCCESS',
payload: posts,
});
})
.catch(error => {
dispatch({
type: 'FETCH_POSTS_ERROR',
payload: error,
});
});
};
};如何使用 Redux DevTools 调试应用程序？
Redux DevTools 是一个用于调试 Redux 应用程序的浏览器扩展程序和包。它提供了一系列开发者工具，包括时间旅行、脱机调试、状态快照以及自动重放等。
使用 Redux DevTools 调试 Redux 应用程序时，通常需要做到以下几点：
- 安装 Redux DevTools。
- 添加 Redux DevTools 跟踪代码。
- 打开调试窗口并检查状态。
示例代码：
import { createStore } from 'redux';
import rootReducer from '../reducers';
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);结语
Redux 的问题集锦中展示了许多与 Redux 相关的技术问题，包括原则、action、reducer、store、connect、中间件等。对 Redux 的理解要点是掌握其基本原则和机制。Redux 是一个非常强大和流行的状态管理库，为前端开发人员提供了一种可预测和易于调试的状态管理方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cf9966e46428fe9eb39cc8