db3a0653a2
* added wp base * started on adding redux * removed immutable to start with * initial code working (redux, immutable) * get lists, basic add new list ready * basic code using redux and immutable js ready * comments * image and readme * readme update * updated image * appease the linter * added comments * changed folder name * updated gif * typo in layouts path * link to blog and telemetry |
||
|---|---|---|
| .. | ||
| assets | ||
| config | ||
| src/webparts/demo | ||
| typings | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .npmignore | ||
| .yo-rc.json | ||
| README.md | ||
| gulpfile.js | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.json | ||
README.md
SharePoint Framework webpart sample using React, Redux and ImmutableJS
Summary
SharePoint Framework webpart 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 webpart.
More details in my post here: Using Redux Async Actions and ImmutableJS in SharePoint Framework
Used SharePoint Framework Version
Applies to
Solution
| Solution | Author(s) |
|---|---|
| React-Redux-RESTAPI | Vardhaman Deshpande @vrdmn |
Version history
| Version | Date | Comments |
|---|---|---|
| 1.0 | July 11, 2017 | Initial release |
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.
Minimal Path to Awesome
- Clone this repository
- in the command line run:
npm installgulp serve- Open the SharePoint Online version of the workbench: /_layouts/15/workbench.aspx
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.