Skip to content

TypeScript rewrite #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 38 commits into from
Jan 19, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
8cc0433
Update to Babel 7
denisw Jan 7, 2019
9432c6b
Remove unused @babel/plugin-external-helpers
denisw Jan 12, 2019
1c0c74e
Add Babel Typescript preset and port isPlainObject
denisw Jan 7, 2019
027b870
Port createAction() to TypeScript
denisw Jan 7, 2019
86fd7b0
Port configureStore() to TypeScript
denisw Jan 8, 2019
0b22aaa
Fix Rollup configuration
denisw Jan 8, 2019
dfc2b68
Fix type errors in serializableStateInvariantMiddleware.test.ts
denisw Jan 8, 2019
4caa7a3
Port createReducer() to TypeScript
denisw Jan 8, 2019
898a586
Port createSlice() to TypeScript
denisw Jan 8, 2019
59a4d44
Port index.js to TS and add index.d.ts
denisw Jan 8, 2019
81ceb20
Add some typings-tester tests
denisw Jan 8, 2019
a9225a5
Add "target" to tsconfig.json
denisw Jan 12, 2019
39e69e3
Use `T extends string` instaead of `string` as action type
denisw Jan 12, 2019
26bb3b2
Remove unneeded extension from Rollup input path
denisw Jan 12, 2019
f1ca437
Remove unneeded type parameter
denisw Jan 12, 2019
50c2ed8
Avoid a type cast in createReducer()
denisw Jan 12, 2019
64c703c
Type `isPlainObject` argument as `unknown`
denisw Jan 12, 2019
cac9df1
Make findNonSerializableValue() typing more precise
denisw Jan 12, 2019
8c55580
Remove redundant "lib" in tsconfig.json
denisw Jan 12, 2019
f1bfbef
Enable "esModuleInterop" in tsconfig.json
denisw Jan 12, 2019
3933c9a
Update typings-tester tsconfig.json
denisw Jan 12, 2019
da97831
Fix configureStore() state type inference edge case
denisw Jan 12, 2019
7b0502d
Fix configureStore() state inference without extra type
denisw Jan 13, 2019
1c21c86
Introduce EnhancedStore type for thunk dispatch
denisw Jan 13, 2019
b23997a
Update formatting commands
markerikson Jan 14, 2019
88bf6b9
Reformat, again
markerikson Jan 14, 2019
b38b2f7
Package lock random changes
markerikson Jan 14, 2019
a680049
Conditionally import immutable-state-invariant middleware
markerikson Jan 14, 2019
db169a4
Make createReducer() return Reducer<Immutable<S>, A>
denisw Jan 14, 2019
57a9231
Merge branch 'master' into typescript
denisw Jan 14, 2019
fcf015b
Revert createReducer() type change
denisw Jan 14, 2019
9fa7442
0.4.0-0
markerikson Jan 15, 2019
82ecf27
Run TypeScript compiler in `prepare`
denisw Jan 14, 2019
c48a52d
Configure ESLint for TypeScript
denisw Jan 15, 2019
e449c8a
Generate TypeScript declaration files in dist/
denisw Jan 15, 2019
d44e834
Revert "Generate TypeScript declaration files in dist/"
denisw Jan 16, 2019
e3d7337
Publish src/ for TypeScript typings
denisw Jan 16, 2019
497babf
0.4.0-1
markerikson Jan 17, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 1 addition & 16 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,18 +1,3 @@
{
"presets": [
[
"env",
{
"modules": false
}
]
],
"env": {
"development": {
"plugins": ["external-helpers"]
},
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
5 changes: 4 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
module.exports = {
extends: 'react-app',
parser: 'typescript-eslint-parser',

rules: {
'jsx-a11y/href-no-hash': 'off'
'jsx-a11y/href-no-hash': 'off',
// Taken care of by TypeScript's `noUnusedLocals` / `noUnusedParameters`
'no-unused-vars': 'off'
}
}
85 changes: 46 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,46 @@
# Redux Starter Kit

[![build status](https://img.shields.io/travis/reduxjs/redux-starter-kit/master.svg?style=flat-square)](https://travis-ci.org/reduxjs/redux-starter-kit)
[![npm version](https://img.shields.io/npm/v/redux-starter-kit.svg?style=flat-square)](https://www.npmjs.com/package/redux-starter-kit)
[![npm downloads](https://img.shields.io/npm/dm/redux-starter-kit.svg?style=flat-square)](https://www.npmjs.com/package/redux-starter-kit)

**A simple set of tools to make using Redux easier**

`npm install redux-starter-kit`

(Special thanks to Github user @shotak for donating to the package name.)

### Purpose

The `redux-starter-kit` package is intended to help address three common complaints about Redux:

- "Configuring a Redux store is too complicated"
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"

We can't solve every use case, but in the spirit of [`create-react-app`](https://github.com/facebook/create-react-app) and [`apollo-boost`](https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3), we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

This package is _not_ intended to solve every possible complaint about Redux, and is deliberately limited in scope. It does _not_ address concepts like "reusable encapsulated Redux modules", data fetching, folder or file structures, managing entity relationships in the store, and so on.

### What's Included

`redux-starter-kit` includes:

- A `configureStore()` function with simplified configuration options. 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.
- A `createReducer()` utility 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/mweststrate/immer) to let you write simpler immutable updates with normal mutative code, like `state.todos[3].completed = true`.
- A `createAction()` utility that returns 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.
- A `createSlice()` function that accepts a set of reducer functions, a slice name, and an initial state value, and automatically generates corresponding action creators, types, and simple selector functions.
- An improved version of the widely used `createSelector` utility for creating memoized selector functions, which can accept string keypaths as "input selectors" (re-exported from the [`selectorator` library](https://github.com/planttheidea/selectorator)).

## Documentation

The `redux-starter-kit` docs are now published at **https://redux-starter-kit.js.org**.

We're currently expanding and rewriting our docs content - check back soon for more updates!
# Redux Starter Kit

[![build status](https://img.shields.io/travis/reduxjs/redux-starter-kit/master.svg?style=flat-square)](https://travis-ci.org/reduxjs/redux-starter-kit)

[![npm version](https://img.shields.io/npm/v/redux-starter-kit.svg?style=flat-square)](https://www.npmjs.com/package/redux-starter-kit)

**A simple set of tools to make using Redux easier**

`npm install redux-starter-kit`

(Special thanks to Github user @shotak for dona

**A simple set of tools to make using Redux easier**

`npm install redux-starter-kit`

(Special thanks to Github user @shotak for donating to the package name.)

### Purpose

The `redux-starter-kit` package is intended to help address three common complaints about Redux:

- "Configuring a Redux store is too complicated"
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"

We can't solve every use case, but in the spirit of le complaint about Redux, and is deliberately limited in scope. It and _not_ address concepts like "reusable encapsulated Redux modules", data fetching, folder or file s, we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

This package is _not_ intended to solve every possible complaint about Redux, and is deliberately limited in scope. It does _not_ address concepts like "reusable encapsulated Redux modules", data fetching, folder or file structures, managing entity relationships in the store, and so on.

### What's Included

`redux-starter-kit` includes:

- A `configureStore()` function with simplified configuration options. 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.
- A `createReducer()` utility 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 e selector functions.
- An improved version of the wid to let you write simpler immutable updates with normal mutative code, like `state.todos[3].completed = true`.
- A `createAction()` utility that returns 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.
- A `createSlice()` function that accepts a set of reducer functions, a slice name, and an initial state value, and automatically generates corresponding action creators, types, and simple selector functions.
- An improved version of the widely used `createSelector` utility for creating memoized selector functions, which can accept string keypaths as "input selectors" (re-exported from the n for more updates!).

## Documentation

The `redux-starter-kit` docs are now published at **tent - check back soon for more **.

We're currently expanding and rewriting our docs content - check back soon for more updates!
14 changes: 5 additions & 9 deletions docs/api/createReducer.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ hide_title: true

# `createReducer()`

A utility that simplifies creating Redux reducer functions, by defining them as lookup tables of functions to handle each action type. It also allows you to drastically simplify immutable update logic, by writing "mutative" code inside your reducers.
A utility that simplifies creating Redux reducer functions, by defining them as lookup tables of functions to handle each action type. It also allows you to drastically simplify immutable update logic, by writing "mutative" code inside your reducers.

Redux [reducers](https://redux.js.org/basics/reducers) are often implemented using a `switch` statement, with one `case` for every handled action type.

Expand Down Expand Up @@ -49,7 +49,7 @@ const counterReducer = createReducer(0, {

## Direct State Mutation

Redux requires reducer functions to be pure and treat state values as immutable. While this is essential for making state updates predictable and observable, it can sometimes make the implementation of such updates awkward. Consider the following example:
Redux requires reducer functions to be pure and treat state values as immutable. While this is essential for making state updates predictable and observable, it can sometimes make the implementation of such updates awkward. Consider the following example:

```js
const addTodo = createAction('todos/add')
Expand All @@ -72,7 +72,7 @@ const todosReducer = createReducer([], {
})
```

The `addTodo` reducer is pretty easy to follow if you know the [ES6 spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). However, the code for `toggleTodo` is much less straightforward, especially considering that it only sets a single flag.
The `addTodo` reducer is pretty easy to follow if you know the [ES6 spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). However, the code for `toggleTodo` is much less straightforward, especially considering that it only sets a single flag.

To make things easier, `createReducer` uses [immer](https://github.com/mweststrate/immer) to let you write reducers as if they were mutating the state directly. In reality, the reducer receives a proxy state that translates all mutations into equivalent copy operations.

Expand All @@ -97,7 +97,7 @@ const todosReducer = createReducer([], {
})
```

If you choose to write reducers in this style, make sure to learn about the [pitfalls mentioned in the immer docs](https://github.com/mweststrate/immer#pitfalls) . Most importantly, you need to ensure that you either mutate the `state` argument or return a new state, _but not both_. For example, the following reducer would throw an exception if a `toggleTodo` action is passed:
If you choose to write reducers in this style, make sure to learn about the [pitfalls mentioned in the immer docs](https://github.com/mweststrate/immer#pitfalls) . Most importantly, you need to ensure that you either mutate the `state` argument or return a new state, _but not both_. For example, the following reducer would throw an exception if a `toggleTodo` action is passed:

```js
const todosReducer = createReducer([], {
Expand All @@ -111,11 +111,7 @@ const todosReducer = createReducer([], {
// ... and returns a new value. This will throw an
// exception. In this example, the easiest fix is
// to remove the `return` statement.
return [
...state.slice(0, index),
todo,
...state.slice(index + 1)
]
return [...state.slice(0, index), todo, ...state.slice(index + 1)]
}
})
```
29 changes: 29 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
export { default as createNextState } from 'immer'
export {
Action,
ActionCreator,
AnyAction,
Middleware,
Reducer,
Store,
StoreEnhancer
} from 'redux'
export { default as createSelector } from 'selectorator'

export {
configureStore,
ConfigureStoreOptions,
getDefaultMiddleware
} from './src/configureStore'
export {
createAction,
getType,
PayloadAction,
PayloadActionCreator
} from './src/createAction'
export { createReducer } from './src/createReducer'
export { createSlice, CreateSliceOptions, Slice } from './src/createSlice'
export {
default as createSerializableStateInvariantMiddleware,
isPlain
} from './src/serializableStateInvariantMiddleware'
Loading