redoodle - GitLite

KO | EN

gitlite — search

#react #ai #typescript #go #machine-learning #macos #nodejs #java #windows #cli #kubernetes #awesome-list #pytorch #openai

redoodle

(★ 102)

An addon library for Redux that enhances its integration with TypeScript.

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- extensions.json
- settings.json
- gitbook.css
- - pr-77.v2.yml
- - pr-79.v2.yml
- - .gitkeep
- - README.md
  - UsingDefinitions.md
  - UsingTypedReducer.md
- - Benefits.md
  - ConfiguringStore.md
  - README.md
- - combineReducers.md
  - composeReducers.md
  - compoundActionsEnhancer.md
  - createStore.md
  - isType.md
  - loggingMiddleware.md
  - omit.md
  - README.md
  - reduceCompoundActions.md
  - setWith.md
- FAQ.md
- InitialState.md
- README.md
- publish.sh
- - combineReducers.spec.ts
  - composeReducers.spec.ts
  - CompoundAction.spec.ts
  - defineAction.spec.ts
  - isType.spec.ts
  - omit.spec.ts
  - reduceCompoundActions.spec.ts
  - reduxMatching.spec.ts
  - setWith.spec.ts
  - typeCompatibility.spec.ts
  - TypedAction.spec.ts
  - TypedReducer.spec.ts
- - process.d.ts
  - TypedReducerBuilderImpl.ts
- _observableCompat.ts
- Action.ts
- combineReducers.ts
- composeReducers.ts
- CompoundAction.ts
- compoundActionsEnhancer.ts
- createStore.ts
- defineAction.ts
- Dispatch.ts
- index.ts
- isType.ts
- loggingMiddleware.ts
- Middleware.ts
- omit.ts
- PayloadOf.ts
- reduceCompoundActions.ts
- Reducer.ts
- ReducerMap.ts
- setWith.ts
- Store.ts
- StoreCreator.ts
- StoreEnhancer.ts
- symbol-observable.ts
- TypedAction.ts
- TypedActionDefinition2.ts
- TypedActionString.ts
- TypedReducer.ts
.autorelease.yml
.changelog.yml
.editorconfig
.gitignore
.npmignore
.prettierrc
book.json
CHANGELOG.md
LICENSE
package.json
README.md
SUMMARY.md
tsconfig-esm.json
tsconfig.json
tslint.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/palantir/redoodle

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd redoodle

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="right">
<a href="https://autorelease.general.dmz.palantir.tech/palantir/redoodle"><img src="https://img.shields.io/badge/Perform%20an-Autorelease-success.svg" alt="Autorelease"></a>
</p>

# Redoodle

Redoodle is an addon library for Redux that enhances its integration with TypeScript.

Redoodle includes a few major categories of addons that can be used individually
and play well with each other:

- [Typed Actions](#typed-actions), or "finally my reducers will stop breaking when I refactor"
- [Compound Actions](#compound-actions), or "my action creators are finally sane"
- Immutable typesafe state manipulation [functions](#utilities)
- Some [opinions on state management](#on-initial-state-management)

[![Circle CI](https://img.shields.io/circleci/project/github/palantir/redoodle/master.svg?style=flat-square)](https://circleci.com/gh/palantir/redoodle)
[![npm](https://img.shields.io/npm/v/redoodle.svg?style=flat-square)](https://www.npmjs.com/package/redoodle)

## Motivation

Redux brought sanity to state management,
and has found itself a seat in many a React application's architecture.
TypeScript is also gaining a large amount of traction,
and has impressed the community with its month-over-month high quality releases.
Unfortunately, there were a few places where default Redux and TypeScript
failed to play well with each other:

1. Redux Actions have magic string types and opaque payloads,
   with no obvious mechanism to track the correlation between the two.
2. Redux Reducers have no easy way to infer correct typings for different Action branches.
3. The TypeScript/JavaScript STL lacks good immutable state update functions.
   While this has gotten better with Object and Array spread and their reasonable typings,
   there is still a dearth of exact behavior for certain common Redux update workflows.

Redoodle attempts to solve these integration pains,
and takes a stab at a few more common points of developer frustration when working
with Redux and Typescript.

## Features

### Typed Actions

Typed Actions do the most legwork to bridge the Redux-TypeScript divide, by correlating
Action magic type strings with Action magic payloads.
With Redoodle, you can create an Action Definition, and then use that Definition
in all places you were previously guessing, casting, or crying.

```ts
import { defineAction, TypedReducer, setWith } from "redoodle";

// FlipTable is an action Definition for actions of type "FlipTable",
// and associates the given payload type with the action.
const FlipTable = defineAction("FlipTable")<{
  tableId: string;
  face: "happy" | "angry";
}>();

// We can use a Definition to create a matching Action. This is all type-safe.
// At runtime, the `action` below has the value
//
//    {
//      type: "FlipTable",
//      payload: {
//        tableId: "2567f216-59b7-4bfe-b46f-909c6711fea4",
//        face: "happy"
//      }
//    }
//
const action = FlipTable({
  tableId: "2567f216-59b7-4bfe-b46f-909c6711fea4",
  face: "happy"
});

// We can also use Definitions to create Reducers that offer slick type inferencing.
// No more manual casts!
interface BanquetHall {
  [tableId: string]: {
    isFlipped: boolean;
  }
}

// banquetHallReducer is a standard Redux Reducer<BanquetHall>. Nothing fancy.
const banquetHallReducer = TypedReducer.builder<BanquetHall>()
  // FlipTable.TYPE is the plain string "FlipTable", but it's branded with
  // rich compile-time information about its associated payload type `{tableId, face}`.
  .withHandler(FlipTable.TYPE, (state, { tableId, face }) => {
    // All of the operations here are 100% type-safe. If I misspelled `isFlipped` below
    // in either place, or fail to copy the correct subset of state when applying my
    // immutable copies, the compiler will save me!
    return setWith(state, {
      [tableId]: setWith(state[tableId], {
        isFlipped: !state[tableId].isFlipped
      })
    });
  })
  .build();
```

For more on Typed Actions, probably the most simple and significant utility
Redoodle offers, check out the Redoodle
[docs](https://palantir.github.io/redoodle/docs/actions/).

### Compound Actions

The only builtin Action Definition that Redoodle ships with is the CompoundAction,
which is a simple higher-level Action that wraps another set of Actions.
Its alternatives in stock Redux is either to

1. Create more complex DoFooAndBar actions, which have the drawback of making every Reducer that cares about
   DoFoo _or_ DoBar also care about DoFooAndBar.
1. Dispatch DoFoo and DoBar individually, which has the drawback of causing multiple Store subscription events,
   which often results in e.g. multiple React renders. It also has the drawback of publishing a possibly inconsistent
   intermediate state when DoFoo was applied but not DoBar.

```ts
import { CompoundAction } from "redoodle";

const doFoo: Action = {...};
const doBar: Action = {...};

store.dispatch(CompoundAction([doFoo, doBar]));
```

To use CompoundActions, your store must be configured to correctly unwrap and reduce them; thankfully Redoodle
comes with a `compoundActionsEnhancer()` (or the simpler `reduceCompoundActions` decorator) for exactly that.

For more on CompoundActions, check out the Redoodle
[docs](https://palantir.github.io/redoodle/docs/compound/).

### Utilities

Redoodle packages a number of utility functions,
some explicitly for clean TypeScript immutable state manipulation,
some for completeness in developer experience.

- [combineReducers(reducers)](https://palantir.github.io/redoodle/docs/utilities/combineReducers.html)
- [composeReducers(...reducers)](https://palantir.github.io/redoodle/docs/utilities/composeReducers.html)
- [compoundActionsEnhancer()](https://palantir.github.io/redoodle/docs/utilities/compoundActionsEnhancer.html)
- [createStore()](https://palantir.github.io/redoodle/docs/utilities/createStore.html)
- [loggingMiddleware([options])](https://palantir.github.io/redoodle/docs/utilities/loggingMiddleware.html)
- [omit(state, keys)](https://palantir.github.io/redoodle/docs/utilities/omit.html)
- [reduceCompoundActions(reducer)](https://palantir.github.io/redoodle/docs/utilities/reduceCompoundActions.html)
- [setWith(state, ...overrides)](https://palantir.github.io/redoodle/docs/utilities/setWith.html)

### On Initial State Management

Redoodle firmly believes that specific benefits the TypeScript compiler provides
should change the way we think about Redux State initialization.
This shifts the behavior of some Redoodle utilities slightly to be more ergonomic for developers,
and is discussed in greater detail [here](https://palantir.github.io/redoodle/docs/InitialState.html).

## Documentation

* [Introduction](https://palantir.github.io/redoodle/)
* [defineAction](https://palantir.github.io/redoodle/docs/actions/)
* [Compound Actions](https://palantir.github.io/redoodle/docs/compound/)
* [Initial State Management](https://palantir.github.io/redoodle/docs/InitialState.html)
* [Utilities](https://palantir.github.io/redoodle/docs/utilities/)
* [FAQ](https://palantir.github.io/redoodle/docs/FAQ.html)

## License

Apache 2.0