sp-dev-fx-webparts/samples/react-redux-async-immutablejs
Hugo Bernier 360169500d added remaining containers 2022-02-16 21:47:07 -05:00
..
.devcontainer added remaining containers 2022-02-16 21:47:07 -05:00
assets Removing unnecessary office product from the sample metadata 2021-12-10 19:55:32 +02:00
config SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
src/webparts/demo SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
typings SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
.editorconfig SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
.gitattributes SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
.gitignore SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
.npmignore SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
.yo-rc.json SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
README.md added remaining containers 2022-02-16 21:47:07 -05:00
gulpfile.js SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
package-lock.json SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
package.json SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
tsconfig.json SPFx webpart sample using Redux Async Actions and ImmutableJS (#262) 2017-07-21 20:55:53 +03:00
tslint.json Add tslint at the root of each SPFx project (#394) 2018-01-08 15:58:48 +02:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
react
8/1/2017 12:00:00 AM

SharePoint Framework web part sample using React, Redux and ImmutableJS

Summary

SharePoint Framework web part which uses Redux to maintain a single state for the entire application and ImmutableJS to create performant state trees.

Redux AJAX actions are used together with the SharePoint REST API to display lists in your site. You can also add a new list to the site from this web part.

More details in my post here: Using Redux Async Actions and ImmutableJS in SharePoint Framework

Compatibility

SPFx 1.1.0 Node.js v6 Compatible with SharePoint Online Compatible SharePoint 2019 Compatible with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Solution

Solution Author(s)
React-Redux-RESTAPI Vardhaman Deshpande @vrdmn

Version history

Version Date Comments
1.0 July 11, 2017 Initial release

Minimal Path to Awesome

  • Clone this repository
  • in the command line run:
    • npm install
    • gulp serve
    • Open the SharePoint Online version of the workbench: /_layouts/15/workbench.aspx

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Why Redux and ImmutableJS

Every Redux action creates a copy of the state, changes the required properties in the copy and then returns the copy as a new state. This prevents bugs where the state is changed unknowingly.

On the other hand, this can also be performance intensive as for changing only a single element, we have to copy the entire state tree in memory. Fortunately, ImmutableJS comes to the rescue here.

Using ImmutableJS, we can create new state trees in memory without duplicating the elements which are unchanged. When you create a new state object using ImmutableJS, the new object still points to the previous memory locations of unchanged elements. Only the properties which are changed are allocated new memory locations.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.