sn-redux

@sensenet/redux

sn-redux is a convention driven way of building sensenet applications using Redux. It contains all the action types, actions and reducers for built-in sensenet Actions and Functions.

Install

# Yarn
yarn add @sensenet/redux

# NPM
npm install @sensenet/redux

sn-redux gives you a standard set of:

• action types: e.g. CREATE_CONTENT_SUCCESS
• actions: e.g. updateContentSuccess, updateContentFailure
• reducers: for the action types above e.g. updateContentSuccess

Tested with the following sensenet Services version:

Installation into an external app with node and npm

Create your sensenet portal Repository to use. You can configure your Store to use this repository, when calling Store.ConfigureStore

import { Repository } from '@sensenet/client-core'
import { Reducers, Store } from '@sensenet/redux'
import { combineReducers } from 'redux'

const sensenet = Reducers.sensenet

const myReducer = combineReducers({
  sensenet,
})

const repository = new Repository({
  repositoryUrl: 'http://path-to-your-portal.com',
})

const options: Store.CreateStoreOptions = {
  repository,
  rootReducer: myReducer,
}

const store = Store.createSensenetStore(options)

To enable your external app to send request against your sensenet portal change your Portal.settings. For further information about cross-origin resource sharing in sensenet check [this]https://docs.sensenet.com/guides/setup#portal.settings) article.

Check your sensenet portal's web.config and if the ODataServiceToken is set, you can pass to your Repository as a config value on client side.

const repository = new Repository.SnRepository({
  RepositoryUrl: 'http://path-to-your-portal.com',
  ODataToken: 'MyODataServiceToken',
})

Import

import { Actions } from '@sensenet/redux'
import { Task } from '@sensenet/default-content-types'

...
const content: Task = { Id: 123 }
...
store.dispatch(Actions.DeleteContent(content.Id, false))

Examples

Combine custom reducer with the built-in ones

import { combineReducers } from 'redux'
import { Reducers } from '@sensenet/redux'

const sensenet = Reducers.sensenet
const myReducer = combineReducers({
  sensenet,
  listByFilter,
})

Creating a store

import { Store } from '@sensenet/redux'
import { Repository } from '@sensenet/client-core'

const repository = new Repository({
  repositoryUrl: 'http://path-to-your-portal.com',
})

const options = {
  repository,
  rootReducer: myReducer,
} as Store.CreateStoreOptions

const store = Store.createSensenetStore(options)

Using built-in actions

import { Repository } from '@sensenet/client-core'
import { Task } from '@sensenet/default-content-type'
import { Actions } from '@sensenet/redux'

const repository = new Repository({
  repositoryUrl: 'http://path-to-your-portal.com',
})

const parentPath = '/workspaces/Project/budapestprojectworkspace/tasks';
const content: Task = {
          Id: 123,
          DisplayName: 'My first task'
      })

dispatch(Actions.CreateContent(parentPath, content, 'Task'))

Documentation

• About OData REST API in sensenet

Influences

• Redux
• Getting started with Redux - Awesome course from the creator of Redux, Dan Abramov.
• Building React Applications with Idiomatic Redux - Another great course of Dan Abramov about building apps with Redux.
• redux-promise-middleware

Example applications

• Using React
• sensenet DMS Demo