1
2
3
4
5
6
7
8
// Before
const store = createStore(counter)

// After
const store = configureStore({
  reducer: counter,
  //middleware: [thunk, logger]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
// Before
const INCREMENT = 'INCREMENT'

function incrementOriginal() {
  return { type: INCREMENT }
}
console.log(incrementOriginal()) // {type: "INCREMENT"}


// After
const incrementNew = createAction('INCREMENT')

console.log(incrementNew()) // {type: "INCREMENT"}

1
2
3
4
5
6
7
8
9
10
11
// Before
function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1
    case DECREMENT:
      return state - 1
    default:
      return state
  }
}

1
2
3
4
5
6
7
8
// After
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const counter = createReducer(0, {
  [increment.type]: state => state + 1,
  [decrement]: state => state - 1 // [decrement] == [decrement.type]
})

1
2
3
4
5
6
7
8
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
})

1
2
const { actions, reducer } = counterSlice
const { increment, decrement } = actions