Add docs around static typing

[markerikson]

We don't currently appear to have any documentation around using static types (TS / Flow) with Redux. It would be beneficial if we had docs on what the type definitions look like, and how to handle correctly typing different scenarios.

[elevenpassin]

This would be great!

[timdorr]

This may actually force me to learn TypeScript...

BTW, I found Dr. Axel Rauschmeyer's intro to TS really helpful for getting me off the ground with typing: http://2ality.com/2018/04/type-notation-typescript.html

[ch1ll0ut1]

Please provide examples for typescript, how to:
Augment dispatch so that you can customize return type for specific action types and have this work in bindActionCreators as well

[ch1ll0ut1]

For me it seem´s this issue is critical because, as of right now no async action library has implemented correct type augmentation. This and the complexity of implementing it, make it quite difficult to use redux with typescript if you want typed async actions.

[eps1lon]

@ch1ll0ut1 Could you point to some untyped examples and explain what the expected behavior of typescript should be for those?

[JannicBeck]

Would appreciate this.
I was looking for an example with TS and was surprised that there was none.
I ended up having to write it myself
Might be good as a starting point.

[ch1ll0ut1]

From https://redux.js.org/advanced/async-actions

import fetch from 'cross-fetch'
​
export const REQUEST_POSTS = 'REQUEST_POSTS'
function requestPosts(subreddit) {
  return {
    type: REQUEST_POSTS,
    subreddit
  }
}
​
export const RECEIVE_POSTS = 'RECEIVE_POSTS'
function receivePosts(subreddit, json) {
  return {
    type: RECEIVE_POSTS,
    subreddit,
    posts: json.data.children.map(child => child.data),
    receivedAt: Date.now()
  }
}
​
export const INVALIDATE_SUBREDDIT = 'INVALIDATE_SUBREDDIT'
export function invalidateSubreddit(subreddit) {
  return {
    type: INVALIDATE_SUBREDDIT,
    subreddit
  }
}
​
// Meet our first thunk action creator!
// Though its insides are different, you would use it just like any other action creator:
// store.dispatch(fetchPosts('reactjs'))
​
export function fetchPosts(subreddit) {
  // Thunk middleware knows how to handle functions.
  // It passes the dispatch method as an argument to the function,
  // thus making it able to dispatch actions itself.
​
  return function (dispatch) {
    // First dispatch: the app state is updated to inform
    // that the API call is starting.
​
    dispatch(requestPosts(subreddit))
​
    // The function called by the thunk middleware can return a value,
    // that is passed on as the return value of the dispatch method.
​
    // In this case, we return a promise to wait for.
    // This is not required by thunk middleware, but it is convenient for us.
​
    return fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then(
        response => response.json(),
        // Do not use catch, because that will also catch
        // any errors in the dispatch and resulting render,
        // causing a loop of 'Unexpected batch number' errors.
        // https://github.com/facebook/react/issues/6895
        error => console.log('An error occurred.', error)
      )
      .then(json =>
        // We can dispatch many times!
        // Here, we update the app state with the results of the API call.
​
        dispatch(receivePosts(subreddit, json))
      )
  }
}

A example to type the above code should result in:
The line store.dispatch(fetchPosts('reactjs'))should have a inferred return type of Promise<{...}> (the type inside the promise depends on the return type inside the thunk action).

[insidewhy]

I've just updated a redux project to use TypeScript, took a few days. The provided redux typings weren't quite good enough though, I rewrote them using TS 2.8 conditional types and now I have a level of type safety I'm really happy with.

[mcrawshaw]

@ohjames would you mind sharing?

[skovy]

This PR does not resolve this issue, but is a first step in documenting Redux with TypeScript and will be useful to have a concrete example when adding documentation, let me know if anyone has any thoughts on this exmaple: #3092

Would like to check in on the status of this issue. If no one is working on this I would love to help out for typescript. @markerikson

[markerikson]

Sure.

Some useful docs I've found that might be helpful for reference:

• https://github.com/piotrwitek/react-redux-typescript-guide
• https://medium.com/@matthewgerstman/redux-with-code-splitting-and-type-checking-205195aded46
• https://github.com/sw-yx/react-typescript-cheatsheet

[zeorin]

It's generally useful to have a look at the tests for a libraries types in flow-typed, e.g. this explains how to type redux + redux-thunk: https://github.com/flow-typed/flow-typed/blob/1751d5bf0ac340abe8c6d6aab58bf6213494f053/definitions/npm/react-redux_v5.x.x/flow_v0.68.0-/test_Provider.js#L39-L48