15、Redux与React Redux：状态管理与UI集成的深度解析

Redux与React Redux：状态管理与UI集成的深度解析

1. Redux基础概念

Redux是一种用于管理应用程序状态的可预测状态容器。它的核心概念包括状态（state）、动作（actions）、归约器（reducers）和存储（store）。

1.1 存储（Store）

存储是Redux应用程序的核心，它持有应用程序的状态数据。在Redux中，改变状态数据的唯一方式是向存储派发动作。以下是一个简单的示例，展示了如何创建存储、派发动作以及订阅存储的变化：

// 创建存储
const store = createStore(
    combineReducers({ colors, sort }),
    (localStorage['redux-store']) ? 
        JSON.parse(localStorage['redux-store']) :
        {}
)

// 订阅存储的变化
store.subscribe(() => {
    console.log('color count:', store.getState().colors.length)
})

// 派发动作
store.dispatch({
    type: "ADD_COLOR",
    id: "2222e1p5-3abl-0p523-30e4-8001l8yf2222",
    title: "Party Pink",
    color: "#F142FF",
    timestamp: "Thu Mar 10 2016 01:11:12 GMT-