React

A 3-post collection

Redux made easy with Redux Toolkit and Typescript

By Matt Button |  Jan 20, 2020  | react, redux, typescript

Using Redux with React can be incredibly challenging for people to get their head around; while the core principles of Redux itself are fairly straightforward and don’t take too long to grasp, a lot of people struggle with using Redux in React apps. Partly because there are so many damn things to integrate:

  1. Redux
  2. React Redux
  3. Redux Thunk
  4. Typescript (getting more common in recent years)
  5. Redux Saga / Redux Observable (in more complex apps)

I spotted this quote which summed it up for me:

Redux was such a mental overhead for me when I started out with it. The amount of boilerplate code that I had to write for the project I worked on was very frustrating.

I struggled with that stuff too, even after I became familiar with the concepts, I often found it difficult to understand the flow of data and events within React Redux apps. This is not uncommon, even the original author of Redux had this to say:

Yup. Can totally relate.

Then I found Redux Toolkit, written by the maintainers of Redux, and recommended by the Redux style guide.

Continue Reading...

Using CKEditor 5 with React via create-react-app

By Matt Button |  May 20, 2018  | react, ckeditor, npm, webpack

When I first started using CKEditor 5 with create-react-app, I installed CKEditor as an npm module, and imported the ClassicEditor build as recommended by the quickstart.

Development mode (via npm start) worked well, and I was happily integrating CKEditor with React, but as soon as I ran npm run build (which generates the create-react-app production build), I ended up with the following error:

> [email protected] build c:\Dev\scratch\ckeditor-integration
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:5:7350

Read more here: http://bit.ly/2tRViJ9

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Ruh-roh. What to do next? How can I solve this? Is this solvable? Is there another way?

Continue Reading...