WRO-9096: Update react-redux related documentation

docs/redux/redux-async.md

@@ -55,30 +55,25 @@ render(
 Store is configured to accept thunk middleware
 
 ```js
-import {createStore, applyMiddleware} from 'redux';
+import {configureStore, createSlice} from '@reduxjs/toolkit';
 import thunkMiddleware from 'redux-thunk';
-import systemSettingsReducer from '../reducers';
+import rootSlice from '../reducers';
 
-export default function configureStore (initialState) {
-	const store = createStore(
-		systemSettingsReducer,
+
+
+export default function configureAppStore (initialState) {
+	return configureStore({
+		reducer: rootSlice.reducer,
 		initialState,
-		applyMiddleware(thunkMiddleware) // lets us dispatch functions
-	);
-	return store;
+		middleware: [thunkMiddleware]
+	});
 }
 ```
 
 Here we create a thunk action creator which returns a function instead of a plain object. It is also possible to dispatch an action or request at the beginning.
 
 ```js
 import LS2Request from '@enact/webos/LS2Request';
-function receiveSystemSettings (res) {
-	return {
-		type: 'RECEIVE_SYSTEM_SETTINGS',
-		payload: res
-	};
-}
 // function returning function!
 export const getSystemSettings = params => dispatch => {
 	// possible to dispatch an action at the start of fetching
@@ -98,24 +93,33 @@ export const getSystemSettings = params => dispatch => {
 Reducer receives a payload and creates a new state.
 
 ```js
-export default function systemSettingsReducer (state = {}, action) {
-	switch (action.type) {
-		case 'RECEIVE_SYSTEM_SETTINGS':
+const rootSlice = createSlice({
+	name: 'systemReducer',
+	initialState: {},
+	reducers: {
+		receiveSystemSettings: (state, action) =>  {
+			return Object.assign({}, state, action.payload.settings);
+		},
+		updateSystemSettings: (state, action) => {
 			return Object.assign({}, state, action.payload.settings);
-		default:
-			return state;
+		}
 	}
-}
+});
+
+export const {receiveSystemSettings, updateSystemSettings} = rootSlice.actions;
+export default rootSlice;
 ```
 
-Connected container dispatches ``getSystemSettings`` on componentDidMount and renders a ``pictureMode`` prop that's been hooked up with a redux store.
+Connected container dispatches ``getSystemSettings`` on component mout and renders a ``pictureMode`` prop that's been hooked up with a redux store.
 
 ```js
-import {Component} from 'react';
-import {connect} from 'react-redux';
-import {getSystemSettings} from '../actions';
+import {useDispatch, useSelector} from 'react-redux';
+import {getSystemSettings} from '../reducers';
+
+const App = () => {
+	const pictureMode = useSelector(store => store.pictureMode);
+	const dispatch = useDispatch();
 
-const App = ({dispatch}) => {
 	useEffect(() => {
 		dispatch(getSystemSettings({
 			category: 'picture',
@@ -124,8 +128,8 @@ const App = ({dispatch}) => {
 		}));
 	}, []);
 
-	return <p>{this.props.pictureMode}</p>;
+	return <p>{pictureMode}</p>;
 }
 
-export default connect()(App);
+export default App;
 ```

docs/redux/redux-intro.md

@@ -10,7 +10,6 @@ This document provides a high-level overview of Redux and how it is used.
 ### What is Redux?
 
 Redux is a library that allows you to manage application state. It closely follows React's Flux data flow model and works well with React, though it does not require it. State management has become more complicated due to a mixing of mutability and asynchronicity, and redux tries to resolve this issue by make state mutation **predictable**.
-State management has become more complicated due to a mixing of mutability and asynchronicity, and redux tries to resolve this issue by make state mutation **predictable**.
 
 We recommend using the most recent version of Redux. To see which version of Redux is appropriate, refer to the [Redux Installation Instructions](https://react-redux.js.org/introduction/quick-start#installation).
 
@@ -155,9 +154,10 @@ Live demo: [http://jsbin.com/keyahus/edit?html,js,output](http://jsbin.com/keyah
 #### React
 
 ```js
+import {createRoot} from 'react-dom/client';
 import {createStore} from 'redux';
-import PropTypes from 'prop-types';
-import { createRoot } from 'react-dom/client';
+import { useDispatch, useSelector } from 'react-redux';
+
 // reducer
 function counter (state = 0, action) {
 	switch (action.type) {
@@ -167,36 +167,32 @@ function counter (state = 0, action) {
 			return state;
 	}
 }
-const Counter = ({value, onIncrement}) =>  {
-	return (
-		<p>
-			Clicked: {value} times
-			{' '}
-			<button onClick={onIncrement}>
-				+
-			</button>
-		</p>
-	);
-}
-Counter.propTypes = {
-	onIncrement: PropTypes.func.isRequired,
-	value: PropTypes.number.isRequired
+const Counter = () => {
+  const value = useSelector((state) => state.counter);
+  const dispatch = useDispatch();
+
+  const incrementHandler = () => {
+    dispatch({ type: 'INCREMENT' });
+  };
+
+  return (
+    <p>
+      Clicked: {value} times <button onClick={incrementHandler}>+</button>
+    </p>
+  );
 };
+
 const store = createStore(counter);
 const render = () => {
   const appElement = (
-    <Counter
-			value={store.getState()}
-			onIncrement={() => store.dispatch({type: 'INCREMENT'})}
-		/>
+    <Counter/>
   );
   createRoot(document.getElementById('root')).render(appElement);
 }
 render();
-store.subscribe(render);
 ```
 
-Live Demo: [https://jsbin.com/pudurig/edit?html,js,output](https://jsbin.com/pudurig/edit?html,js,output)
+Live Demo: [https://stackblitz.com/edit/react-u1qccn?file=src%2Fstore%2Findex.js,src%2Findex.js,src%2FApp.js](https://stackblitz.com/edit/react-u1qccn?file=src%2Fstore%2Findex.js,src%2Findex.js,src%2FApp.js)
 
 ### Redux Toolkit
 
@@ -233,56 +229,51 @@ Our components need access to the Redux store so they can subscribe to it. This
 #### example
 
 ```js
+import {createRoot} from 'react-dom/client';
 import {createStore} from 'redux';
-import {connect, Provider} from 'react-redux';
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-import {render} from 'react-dom';
+import {Provider, useDispatch, useSelector} from 'react-redux';
+
 // reducer
-function counter (state = 0, action) {
-	switch (action.type) {
-		case 'INCREMENT':
-			return state + 1;
-		default:
-			return state;
-	}
-}
-// presentational counter component
-class Counter extends Component {
-	render () {
-		const {value, onIncrement} = this.props;
-		return (
-			<p>
-				Clicked: {value} times
-				{' '}
-				<button onClick={onIncrement}>
-					+
-				</button>
-			</p>
-		);
-	}
-}
-const mapStateToProps = (state) => {
-	return {value: state};
+const counterReducer = (state = { counter: 0 }, action) => {
+  switch (action.type) {
+    case 'INCREMENT':
+      return { counter: state.counter + 1 };
+    default:
+      return state;
+  }
 };
-const mapDispatchToProps = (dispatch) => {
-	return {
-		onIncrement: () => dispatch({type: 'INCREMENT'})
-	};
+
+//store
+const store = createStore(counterReducer);
+
+// presentational counter component
+const Counter = () => {
+  const value = useSelector((state) => state.counter);
+  const dispatch = useDispatch();
+
+  const incrementHandler = () => {
+    dispatch({ type: 'INCREMENT' });
+  };
+
+  return (
+    <p>
+      Clicked: {value} times <button onClick={incrementHandler}>+</button>
+    </p>
+  );
 };
-// creates a connected container component with `connect`
-const EnhancedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
-const store = createStore(counter);
-class App extends Component {
-	render () {
-		return (
-			<Provider store={store}>
-				<EnhancedCounter />
-			</Provider>
-		);
-	}
+
+const App = () => {
+  return <Counter />;
 }
-render(<App />, document.getElementById('root'));
+
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+
+root.render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+);
 ```
 
 Live Demo: [http://jsbin.com/zukojok/1/edit?html,js,output](http://jsbin.com/zukojok/1/edit?html,js,output)