geekeast / redux-hooks-song

A simple react app using redux with hooks

Table of Contents

• Install Redux
• Define Redux
  • Define Actions: {type:..., payload:...}
  • Define Reducers: (state, action)=>{...}
  • Define Store: createStore()
• Use Redux
  • Read data: useSelector()
  • Send data: useDispatch()
• Others
  • Collect State: useReducer()

Install Redux

yarn add react-redux redux
yarn add --dev @types/react-redux @types/redux

Define Redux

Define Actions

• 用描述性的方式告诉store应该如何处理数据;
• Action Creator用来创造Actions(code reuse);

export const selectSong = (song: any) => { return { type: 'SONG_SELECTED', payload: song } }; 

Define Reducers

• 定义reducers: 定义数据的初始状态和处理方法

export const songsReducer = () => {
  return [
    { title: 'No Scrubs', duration: '4:05' },
    { title: 'Macarena', duration: '2:30' },
    { title: 'All Star', duration: '3:15' },
    { title: 'I want it That Way', duration: '5:10' }
  ];
};

export const selectedSongsReducer = (selectedSong = null, action: { type: string, payload: any }) => {
  if (action.type === 'SONG_SELECTED') {
    return action.payload;
  }
  return selectedSong;
};

• 整合reducers

// components/reducers/index
import { combineReducers } from 'redux';
import { selectedSongsReducer, songsReducer } from './Song'
export default combineReducers({
  songs: songsReducer,
  selectedSong: selectedSongsReducer
});

Define Store

• 在全局载入store

import { createStore } from "redux";
import reducer from './reducers';
const store = createStore(reducer);
export default store;

Use Redux

Read data

import { useSelector } from 'react-redux';
const selectedSong = useSelector(state => _.get(state, ['selectedSong'], null));

Send data

const dispatch = useDispatch();
  <button className="ui button primary" 
      onClick={() => dispatch(selectSong(song))}> Select </button>

Others

useReducer

• 并不是redux的一部分
• 是用来聚合某些相互依赖的状态用的，局部状态管理器
• 在functional component的情景下，能够callback function读取到最新的数据，而不是snapshot的数据
• useReducer跟useState一样，每次状态变化都会引起组件的重新渲染
• 引起状态变化的组件和存储状态的组件不是同一个，能够避免不必要的更新

const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [data, setData] = useState({});

const reducer = (prevState, action) => {
  switch(action.type){
    case 'a': return {...state};
    case 'b': return {...state, x:1};
    case 'c': return {...state, x:2};
    default: throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, {
  isLoading: false,
  isError: false,
  data: {}
})

Reference

• How to fetch data with React Hooks?

Question

• Why we need to use useReducer() and useCallback()?
• Class Component vs Functional Component? Answer