Redux入门

redux入门

什么是Redux

redux是一个全局状态管理库，通常是集成到react中使用。Redux 提供的模式和工具使你更容易理解应用程序中的状态何时、何地、为什么、state 如何被更新，以及当这些更改发生时你的应用程序逻辑将如何表现。

Redux基础概念

三个基础部分

一个redux应用拥有三个部分：

view：基于当前状态的视图声明性描述
state：驱动应用的真实数据
actions：应用程序中发生的事件，用于触发状态更新

单向数据流

数据的流动是单向的，用户与视图（View）交互后会通过action来通知数据state更新，state更新后又会重新渲染视图(View)。

不可变性

JavaScript中对象和数组都是“可变”的，内存中保存的是对象的引用。

const obj = {}
console.log(obj)
obj.a = 1;
/* console
{
  a: 1
}
*/

我们先获取对象的值，然后再改变对象，但是最后看到的仍然是更新后的对象。

Redux 期望所有状态更新都是使用不可变的方式。这通常可以利用展开运算符实现。

三原则

单一事实来源：整个应用程序的状态存储在单个存储中的对象树中。
状态是只读的：更改状态的唯一方法是发出一个操作，一个描述所发生情况的对象。
使用纯函数进行更改：若要指定状态树如何通过操作转换，请编写纯化简器。

Redux原生API

redux通过createStore创建一个redux应用，它必须接收一个reducer函数作为第一个参数，第二个参数是初始state，它是可选的。

const state = {
  play: false,
  player: '周杰伦',
  musicName: '青花瓷',
  time: new Date(),
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'Change_Play':
      return { ...state, play: !state.play };
    case 'ChangeMusicInfo': {
      return { ...state, ...action };
    }
    default: {
      return { ...state };
    }
  }
};

export const store = createStore(reducer, state);

如果reducer比较复杂，可以将其拆分成多个reduer，然后在通过combineReducers进行合并。注意不应该创建多个store。

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// 这将返回如下的 state 对象
{
  potato: {
    // ... potatoes, 和一些其他由 potatoReducer 管理的 state 对象 ...
  },
  tomato: {
    // ... tomatoes, 和一些其他由 tomatoReducer 管理的 state 对象，比如说 sauce 属性 ...
  }
}

createStore得到的store上挂载了四个方法：

getState()：返回应用当前的 state 树。它与 store 的最后一个 reducer 返回值相同。
dispatch(action)：触发state更新
subscribe(listener)：订阅一个监听器，当state变化时执行回调
replaceReducer(nextReducer)：替换 store 当前用来计算 state 的 reducer。

事实上你通常不需要直接操作这些API，因为实际开发时通常使用用官方工具库redux-toolkit来简化操作。

Demo

这里有一个使用redux原生API与react结合的Demo。

https://codesandbox.io/s/reduxyuan-sheng-g8l1px?from-embed=&file=/src/App.js

Redux实际应用

在实际开发中使用redux时通常会结合redux-toolkit和react-redux一起使用。

configureStore

在原生Redux中我们用createStore来创建一个redux状态树，但是现在有了redux-toolkit后，我们可以借助configureStore这个函数来创建redux状态树。和createStore相似，这里需要传递一个reducer，只不过现在是通过对象参数的方式来传递。

export const store = configureStore({
  reducer: rootReducer
});

createAction和createReducer

action是触发state更新的唯一方式，它一个至少包含type字段的对象。我们之前用action的时候每次都要写一遍action对象，但是其实可以通过action creator函数来简化操作。

export function playStateAction(payload:any){
	return {
		type: "CHANGE_PLAY_STATE",
		payload
	}
}

这样我们就不用每次都写一遍action对象了，只需要调用playStateAction函数，并传递所需的参数就能得到一个action。

redux-toolkit提供了createAction函数来实现这个操作，只需要传递一个字符串作为type，就会返回一个action creator函数。

const changePlay = createAction("CHANGE_PLAY_STATE");
console.log(changePlay({ a: 1 }));
/*
{
type: "CHANGE_PLAY_STATE"
payload: {a: 1}
}
*/

redux-toolkit同样提供了简化编写reducer的API，即createReducer。createReducer有两种使用方式，一种是链式函数调用，一种是查找表对象。

链式函数调用

const rootReducer = createReducer(initState /*初始状态*/, (builder) => {
  builder
    .addCase(changePlay, (state, action) => {
      return {...state, play: !state.play};
    })
    .addDefaultCase((state) => state);
});

查找表对象

const rootReducer = createReducer(initState, {
	// 利用es6计算属性获取type
  [changePlay]: (state) => ({ ...state, play: !state.play })
});

CreateSlice

基于前面的三个API已经可以实现redux状态库了，但是还不够好，因为此时所有的状态都被放在了一个对象里，如果应用较为复杂，那么状态对象(store)、action就很容易变得杂乱无章。更好地方法是将状态对象分隔成多个部分，相同逻辑的状态放在一起，并且将相关联的action也整合进去，那么最后得到的这一个个的部分我们称为Slice，而用于创建Slice的函数就是createSlice。

// 原来的写法
export const changePlay = createAction("CHANGE_PLAY_STATE");
const initState = {
  play: false
};
const rootReducer = createReducer(initState, {
  [changePlay]: (state) => ({ ...state, play: !state.play })
});
export const store = configureStore({
  reducer: { rootReducer }
});

// Slice的写法
const initState = {
  play: false
};
const playSlice = createSlice({
  name: "playStatus",
	initialState: initState,
  reducers: {
    changePlay: (state) => ({ ...state, play: !state.play })
  }
});
export const store = configureStore({
  reducer: playSlice.reducer
});
export const { changePlay } = playSlice.actions;

在创建Slice的过程中redux-toolkit会自动生成action creator ，相比较原来的写法省略了编写action creator这一步，并且相同逻辑的action和reducer都被整合在一个Slice中，代码结构更加清晰。

如果有多个Slice，可以将它们放到一个对象中传给configureStore。

export const store = configureStore({
  reducer: {
    [playSlice.name]: playSlice.reducer,
    [musicSlice.name]: musicSlice.reducer
  }
});

react-redux

如果要在react中使用redux，最好的方法是使用react-redux。

假设我们已经通过redux-toolkit创建了一个store。如下所示：

const initState = {
  play: false,
  musicName: "青花瓷"
};
const playSlice = createSlice({
  name: "playStatus",
	initialState: initState,
  reducers: {
    changePlay: (state) => ({ ...state, play: !state.play })
  }
});
export const store = configureStore({
  reducer: playSlice.reducer
});
export const { changePlay } = playSlice.actions;

Provider

首先我们需要为react提供redux store，这可以通过Provider组件实现,Provider需要传递store作为prop。

import { Provider } from "react-redux";
import { store } from "./store/index";

import Child from "./Child";

export default function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <Child />
      </Provider>
    </div>
  );
}

之后被Provider直接或间接包裹的子孙组件都可以访问到store。

获取State和更新state

通过react-redux提供的useSelector API来获取state。useSelector 需要传递一个selector函数，通过这个函数来提取数据。

同时还提供useDispatch API，通过它来获取dispatch函数，向dispatch函数传递action对象来更新state。

import { useSelector, useStore, useDispatch } from "react-redux";
import { changePlay } from "./store/index";

export default function Child() {
  const dispatch = useDispatch();
  const playStatus = useSelector((state) => state);

  console.log(playStatus);

  function onPlay() {
    dispatch(changePlay());
  }

  return (
    <div>
      <p>播放状态：{playStatus.play ? "播放中" : "暂停中"}</p>
      <div>
        <button onClick={onPlay}>切换播放状态</button>
      </div>
    </div>
  );
}

Demo

https://codesandbox.io/s/reverent-joliot-bpqwdh?file=/src/Child.js:32-43

最后更新于1年前