Merge pull request #3425 from EskiMojo14/action-to-string-remove

Author: markerikson

docs/api/createAction.mdx

@@ -31,7 +31,7 @@ const action = increment(3)
 // { type: 'counter/increment', payload: 3 }
 ```
 
-The `createAction` helper combines these two declarations into one. It takes an action type and returns an action creator for that type. The action creator can be called either without arguments or with a `payload` to be attached to the action. Also, the action creator overrides [toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) so that the action type becomes its string representation.
+The `createAction` helper combines these two declarations into one. It takes an action type and returns an action creator for that type. The action creator can be called either without arguments or with a `payload` to be attached to the action.
 
 ```ts
 import { createAction } from '@reduxjs/toolkit'
@@ -44,10 +44,7 @@ let action = increment()
 action = increment(3)
 // returns { type: 'counter/increment', payload: 3 }
 
-console.log(increment.toString())
-// 'counter/increment'
-
-console.log(`The action type is: ${increment}`)
+console.log(`The action type is: ${increment.type}`)
 // 'The action type is: counter/increment'
 ```
 
@@ -89,7 +86,7 @@ If provided, all arguments from the action creator will be passed to the prepare
 
 ## Usage with createReducer()
 
-Because of their `toString()` override, action creators returned by `createAction()` can be used directly as keys for the case reducers passed to [createReducer()](createReducer.mdx).
+Action creators can be passed directly to `addCase` in a [createReducer()](createReducer.mdx) build callback.
 
 ```ts
 import { createAction, createReducer } from '@reduxjs/toolkit'
@@ -103,21 +100,23 @@ const counterReducer = createReducer(0, (builder) => {
 })
 ```
 
+<!-- TODO: how do we handle this? -->
+
 ## Non-String Action Types
 
 In principle, Redux lets you use any kind of value as an action type. Instead of strings, you could theoretically use numbers, [symbols](https://developer.mozilla.org/en-US/docs/Glossary/Symbol), or anything else ([although it's recommended that the value should at least be serializable](https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)).
 
-However, Redux Toolkit rests on the assumption that you use string action types. Specifically, some of its features rely on the fact that with strings, the `toString()` method of an `createAction()` action creator returns the matching action type. This is not the case for non-string action types because `toString()` will return the string-converted type value rather than the type itself.
+However, Redux Toolkit rests on the assumption that you use string action types.
 
 ```js
 const INCREMENT = Symbol('increment')
 const increment = createAction(INCREMENT)
 
-increment.toString()
+increment.type.toString()
 // returns the string 'Symbol(increment)',
 // not the INCREMENT symbol itself
 
-increment.toString() === INCREMENT
+increment.type.toString() === INCREMENT
 // false
 ```
 

docs/introduction/getting-started.md

@@ -94,7 +94,7 @@ Redux Toolkit includes these APIs:
 
 - [`configureStore()`](../api/configureStore.mdx): wraps `createStore` to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes `redux-thunk` by default, and enables use of the Redux DevTools Extension.
 - [`createReducer()`](../api/createReducer.mdx): that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses the [`immer` library](https://github.com/immerjs/immer) to let you write simpler immutable updates with normal mutative code, like `state.todos[3].completed = true`.
-- [`createAction()`](../api/createAction.mdx): generates an action creator function for the given action type string. The function itself has `toString()` defined, so that it can be used in place of the type constant.
+- [`createAction()`](../api/createAction.mdx): generates an action creator function for the given action type string.
 - [`createSlice()`](../api/createSlice.mdx): accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.
 - [`createAsyncThunk`](../api/createAsyncThunk.mdx): accepts an action type string and a function that returns a promise, and generates a thunk that dispatches `pending/fulfilled/rejected` action types based on that promise
 - [`createEntityAdapter`](../api/createEntityAdapter.mdx): generates a set of reusable reducers and selectors to manage normalized data in the store

docs/usage/usage-guide.md

@@ -280,24 +280,16 @@ addTodo({ text: 'Buy milk' })
 
 ### Using Action Creators as Action Types
 
-Redux reducers need to look for specific action types to determine how they should update their state. Normally, this is done by defining action type strings and action creator functions separately. Redux Toolkit `createAction` function uses a couple tricks to make this easier.
-
-First, `createAction` overrides the `toString()` method on the action creators it generates. **This means that the action creator itself can be used as the "action type" reference in some places**, such as the keys provided to `builder.addCase` or the `createReducer` object notation.
-
-Second, the action type is also defined as a `type` field on the action creator.
+Redux reducers need to look for specific action types to determine how they should update their state. Normally, this is done by defining action type strings and action creator functions separately. Redux Toolkit `createAction` function make this easier, by defining the action type as a `type` field on the action creator.
 
 ```js
 const actionCreator = createAction('SOME_ACTION_TYPE')
 
-console.log(actionCreator.toString())
-// "SOME_ACTION_TYPE"
-
 console.log(actionCreator.type)
 // "SOME_ACTION_TYPE"
 
 const reducer = createReducer({}, (builder) => {
-  // actionCreator.toString() will automatically be called here
-  // also, if you use TypeScript, the action type will be correctly inferred
+  // if you use TypeScript, the action type will be correctly inferred
   builder.addCase(actionCreator, (state, action) => {})
 
   // Or, you can reference the .type field:
@@ -308,7 +300,7 @@ const reducer = createReducer({}, (builder) => {
 
 This means you don't have to write or use a separate action type variable, or repeat the name and value of an action type like `const SOME_ACTION_TYPE = "SOME_ACTION_TYPE"`.
 
-Unfortunately, the implicit conversion to a string doesn't happen for switch statements. If you want to use one of these action creators in a switch statement, you need to call `actionCreator.toString()` yourself:
+If you want to use one of these action creators in a switch statement, you need to call `actionCreator.type` yourself:
 
 ```js
 const actionCreator = createAction('SOME_ACTION_TYPE')
@@ -320,19 +312,13 @@ const reducer = (state = {}, action) => {
       break
     }
     // CORRECT: this will work as expected
-    case actionCreator.toString(): {
-      break
-    }
-    // CORRECT: this will also work right
     case actionCreator.type: {
       break
     }
   }
 }
 ```
 
-If you are using Redux Toolkit with TypeScript, note that the TypeScript compiler may not accept the implicit `toString()` conversion when the action creator is used as an object key. In that case, you may need to either manually cast it to a string (`actionCreator as string`), or use the `.type` field as the key.
-
 ## Creating Slices of State
 
 Redux state is typically organized into "slices", defined by the reducers that are passed to `combineReducers`:

packages/toolkit/src/createAction.ts

@@ -224,9 +224,7 @@ export type PayloadActionCreator<
 /**
  * A utility function to create an action creator for the given action type
  * string. The action creator accepts a single argument, which will be included
- * in the action object as a field called payload. The action creator function
- * will also have its toString() overridden so that it returns the action type,
- * allowing it to be used in reducer logic that is looking for that action type.
+ * in the action object as a field called payload.
  *
  * @param type The action type to use for created actions.
  * @param prepare (optional) a method that takes any number of arguments and returns { payload } or { payload, meta }.
@@ -241,9 +239,7 @@ export function createAction<P = void, T extends string = string>(
 /**
  * A utility function to create an action creator for the given action type
  * string. The action creator accepts a single argument, which will be included
- * in the action object as a field called payload. The action creator function
- * will also have its toString() overridden so that it returns the action type,
- * allowing it to be used in reducer logic that is looking for that action type.
+ * in the action object as a field called payload.
  *
  * @param type The action type to use for created actions.
  * @param prepare (optional) a method that takes any number of arguments and returns { payload } or { payload, meta }.
@@ -277,8 +273,6 @@ export function createAction(type: string, prepareAction?: Function): any {
     return { type, payload: args[0] }
   }
 
-  actionCreator.toString = () => `${type}`
-
   actionCreator.type = type
 
   actionCreator.match = (action: Action<string>): action is PayloadAction =>
@@ -328,22 +322,6 @@ function isValidKey(key: string) {
   return ['type', 'payload', 'error', 'meta'].indexOf(key) > -1
 }
 
-/**
- * Returns the action type of the actions created by the passed
- * `createAction()`-generated action creator (arbitrary action creators
- * are not supported).
- *
- * @param action The action creator whose action type to get.
- * @returns The action type used by the action creator.
- *
- * @public
- */
-export function getType<T extends string>(
-  actionCreator: PayloadActionCreator<any, T>
-): T {
-  return `${actionCreator}` as T
-}
-
 // helper types for more readable typings
 
 type IfPrepareActionMethodProvided<

packages/toolkit/src/index.ts

@@ -30,7 +30,6 @@ export type { DevToolsEnhancerOptions } from './devtoolsExtension'
 export {
   // js
   createAction,
-  getType,
   isAction,
   isActionCreator,
   isFSA as isFluxStandardAction,

packages/toolkit/src/tests/createAction.test.ts

@@ -1,4 +1,4 @@
-import { createAction, getType, isAction } from '@reduxjs/toolkit'
+import { createAction, isAction, isActionCreator } from '@reduxjs/toolkit'
 
 describe('createAction', () => {
   it('should create an action', () => {
@@ -9,13 +9,6 @@ describe('createAction', () => {
     })
   })
 
-  describe('when stringifying action', () => {
-    it('should return the action type', () => {
-      const actionCreator = createAction('A_TYPE')
-      expect(`${actionCreator}`).toEqual('A_TYPE')
-    })
-  })
-
   describe('when passing a prepareAction method only returning a payload', () => {
     it('should use the payload returned from the prepareAction method', () => {
       const actionCreator = createAction('A_TYPE', (a: number) => ({
@@ -122,12 +115,13 @@ describe('createAction', () => {
   })
 })
 
+const actionCreator = createAction('anAction')
+
+class Action {
+  type = 'totally an action'
+}
 describe('isAction', () => {
   it('should only return true for plain objects with a type property', () => {
-    const actionCreator = createAction('anAction')
-    class Action {
-      type = 'totally an action'
-    }
     const testCases: [action: unknown, expected: boolean][] = [
       [{ type: 'an action' }, true],
       [{ type: 'more props', extra: true }, true],
@@ -143,9 +137,21 @@ describe('isAction', () => {
   })
 })
 
-describe('getType', () => {
-  it('should return the action type', () => {
-    const actionCreator = createAction('A_TYPE')
-    expect(getType(actionCreator)).toEqual('A_TYPE')
+describe('isActionCreator', () => {
+  it('should only return true for action creators', () => {
+    expect(isActionCreator(actionCreator)).toBe(true)
+    const notActionCreators = [
+      { type: 'an action' },
+      { type: 'more props', extra: true },
+      actionCreator(),
+      Promise.resolve({ type: 'an action' }),
+      new Action(),
+      false,
+      'a string',
+      false,
+    ]
+    for (const notActionCreator of notActionCreators) {
+      expect(isActionCreator(notActionCreator)).toBe(false)
+    }
   })
 })