Skip to content

Commit

Permalink
chore: update README add CI tests
Browse files Browse the repository at this point in the history
  • Loading branch information
crutchcorn committed Sep 5, 2024
1 parent 2a68adf commit c3a7d69
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 50 deletions.
23 changes: 23 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
name: Tests

on: [push, pull_request, workflow_dispatch]

jobs:
test:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
with:
version: 9
- uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'pnpm'

- name: Install packages
run: pnpm install --frozen-lockfile

- name: Run tests
run: pnpm test
73 changes: 23 additions & 50 deletions packages/vue-redux/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,40 @@
Official Vue bindings for [Redux](https://github.com/reduxjs/redux).
Performant and flexible.

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/reduxjs/vue-redux/test.yml?style=flat-square) [![npm version](https://img.shields.io/npm/v/@reduxjs/vue.svg?style=flat-square)](https://www.npmjs.com/package/@reduxjs/vue)
[![npm downloads](https://img.shields.io/npm/dm/@reduxjs/vue.svg?style=flat-square)](https://www.npmjs.com/package/@reduxjs/vue)

> [!WARNING]
> This package is in alpha and is rapidly developing.
# Features
## Installation

Vue Redux requires **Vue 3 or later**.

To use React Redux with your Vue app, install it as a dependency:

```bash
# If you use npm:
npm install @reduxjs/vue-redux

- Compatible with Vue 3+
- [Redux Toolkit](https://redux-toolkit.js.org/) support
# Or if you use Yarn:
yarn add @reduxjs/vue-redux
```

You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.

This assumes that you’re using [npm](http://npmjs.com/) package manager
with a module bundler like [Webpack](https://webpack.js.org/) or
[Browserify](http://browserify.org/) to consume [CommonJS
modules](https://webpack.js.org/api/module-methods/#commonjs).

# Usage

The following Vue component works as-expected:

```vue
<script setup lang="ts">
import { useSelector, useDispatch } from 'vue-redux'
import { useSelector, useDispatch } from '@reduxjs/vue-redux'
import { decrement, increment } from './store/counter-slice'
import { RootState } from './store'
Expand All @@ -39,49 +58,3 @@ The following Vue component works as-expected:
</div>
</template>
```

Assuming the following `store.ts` file is present:

```typescript
import { PayloadAction, configureStore, createSlice } from '@reduxjs/toolkit'

export interface CounterState {
value: number
}

const initialState: CounterState = {
value: 0,
}

export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
```

0 comments on commit c3a7d69

Please sign in to comment.