redux ducks

src/pages/ActivateAccount.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import {activateAccount} from "../api/users";
 import {connect} from "react-redux";
-import {addNotification} from "../store/actions";
 import errors from "../api/errors";
 import Loading from "../ui/Loading";
+import {addNotification} from "../store/ducks/notifications";
 
 type Props = {
     history: { push: (path: string) => void }
     match: { params: { token: string } }
-    addNotification: (notification: React.ReactNode) => void
+    addNotification: AddNotification
 };
 
 type State = {
@@ -64,4 +64,4 @@ export default connect(null,
     dispatch => ({
         addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification))
     })
-)(ActivateAccount);
+)(ActivateAccount);

src/pages/AdminPanel/News/APModifyPost.tsx

@@ -11,9 +11,10 @@ import BBEditor from "../../../ui/BBEditor/BBEditor";
 import parser from 'bbcode-to-react';
 import Title from "../../../ui/Title/Title";
 import {connect} from "react-redux";
-import {addNotification, setModal} from "../../../store/actions";
 import ConfirmPopout from "../../../ui/ConfirmPopout/ConfirmPopout";
 import NotificationMessage from "../../../ui/Notifications/NotificationMessage";
+import {setModal} from "../../../store/ducks/modal";
+import {addNotification} from "../../../store/ducks/notifications";
 
 type Props = {
     postId: number
@@ -147,4 +148,4 @@ export default connect(null,
         setPopout: (modal: React.ReactNode | null) => dispatch(setModal(modal)),
         addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification))
     })
-)(APModifyPost);
+)(APModifyPost);

src/pages/AdminPanel/Users/ModifyUser.tsx

@@ -3,9 +3,9 @@ import {connect} from "react-redux";
 import {fetchUser, updateUser} from "../../../api/users";
 import Loading from "../../../ui/Loading";
 import './APUser.sass';
-import {addNotification} from "../../../store/actions";
 import NotificationMessage from "../../../ui/Notifications/NotificationMessage";
 import Button from "../../../ui/Button/Button";
+import {addNotification} from "../../../store/ducks/notifications";
 
 type Props = {
     userId: number
@@ -90,4 +90,4 @@ export default connect(
             dispatch(addNotification(notification))
         }
     })
-)(ModifyUser);
+)(ModifyUser);

src/pages/App/App.tsx

@@ -8,7 +8,6 @@ import Main from "../Main/Main"
 import NotFoundError from "../NotFoundError";
 import {fetchCurrentUser, fetchUserSettings} from "../../api/users";
 import {connect} from "react-redux";
-import {setUser} from "../../store/actions";
 import Character from "../Character/Character";
 // @ts-ignore
 import parser from 'bbcode-to-react';
@@ -26,6 +25,7 @@ import PasswordRestore from "../PasswordRestore/PasswordRestore";
 import Users from "../Users/Users";
 import {getVersion, version} from "../../api/api";
 import Settings from "../User/Settings/Settings";
+import {setUser} from "../../store/ducks/currentUser";
 
 type Props = {
     notifications: React.ReactNode[]
@@ -130,8 +130,6 @@ export default connect(
         modal: state.modal
     }),
     dispatch => ({
-        setUser: (userData: UserType) => {
+        setUser: (userData: UserType) => dispatch(setUser(userData))
-            dispatch(setUser(userData))
-        }
     })
 )(App);

src/pages/Comments/Comments.tsx

@@ -6,9 +6,9 @@ import './Comments.sass';
 import Loading from "../../ui/Loading";
 import {fetchUser} from "../../api/users";
 import {connect} from "react-redux";
-import {addNotification} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
 import Button from "../../ui/Button/Button";
+import {addNotification} from "../../store/ducks/notifications";
 
 type Props = {
     comments: CommentType[]
@@ -48,7 +48,7 @@ class Comments extends React.Component<Props, State> {
         event.preventDefault();
         const { sendComment, addNotification } = this.props;
         const { commentText } = this.state;
-        
+
         if(commentText === '') {
             const notification = (
                 <NotificationMessage level={"error"}>
@@ -84,7 +84,7 @@ class Comments extends React.Component<Props, State> {
         const { users, commentText } = this.state;
         if(!user) return <Loading/>;
 
-        return (            
+        return (
             <div className="Comments">
             {user.authorized &&
             <form onSubmit={this.sendComment}>
@@ -96,7 +96,7 @@ class Comments extends React.Component<Props, State> {
                     <FontAwesomeIcon onClick={event => this.addTagToComment(event, 'spoiler')} icon={faExclamationTriangle}/>
                     <FontAwesomeIcon onClick={event => this.addTagToComment(event, 'color', 'white')} icon={faTint}/>
                 </div>
-                <textarea 
+                <textarea
                     className={'Comments_TextArea'}
                     placeholder={'Текст комментария'}
                     value={commentText}
@@ -126,8 +126,6 @@ class Comments extends React.Component<Props, State> {
 
 export default connect(null,
     dispatch => ({
-        addNotification: (notification: React.ReactNode) => {
+        addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification))
-            dispatch(addNotification(notification))
-        }
     })
-)(Comments);
+)(Comments);

src/pages/Modals/LoginModal.tsx

@@ -2,7 +2,6 @@ import React, {FormEvent, ChangeEvent} from "react";
 import Modal from "../../ui/Modal/Modal";
 import {login} from "../../api/auth";
 import {connect} from "react-redux";
-import {addNotification, hideModal, setModal, setUser} from "../../store/actions";
 import './LoginModal.sass'
 import {Link} from "react-router-dom";
 import errors from "../../api/errors";
@@ -11,6 +10,9 @@ import Recaptcha from '../../ui/Recaptcha/Recaptcha'
 import Button from "../../ui/Button/Button";
 import RegisterModal from "./RegisterModal";
 import Input from "../../ui/Input/Input";
+import {setUser} from "../../store/ducks/currentUser";
+import {addNotification} from "../../store/ducks/notifications";
+import {hideModal, setModal} from "../../store/ducks/modal";
 
 type Props = {
     setUser: (user: UserType) => void

src/pages/Modals/RegisterModal.tsx

@@ -4,10 +4,11 @@ import Recaptcha from '../../ui/Recaptcha/Recaptcha'
 import './RegisterModal.sass'
 import {registerUser} from "../../api/auth";
 import {connect} from "react-redux";
-import {addNotification, setModal} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
 import Button from "../../ui/Button/Button";
 import Input from "../../ui/Input/Input";
+import {addNotification} from "../../store/ducks/notifications";
+import {setModal} from "../../store/ducks/modal";
 
 type Props = {
     addNotification: (notification: React.ReactNode) => void

src/pages/Navbar/Navbar.tsx

@@ -3,12 +3,13 @@ import './Navbar.sass'
 import {connect} from "react-redux";
 import {userLogout} from "../../api/auth";
 import {Link} from "react-router-dom";
-import {logout, setModal} from "../../store/actions";
 import {hasAccessToAdminPanel} from "../../utils";
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faBars} from '@fortawesome/free-solid-svg-icons';
 import RegisterModal from "../Modals/RegisterModal";
 import LoginModal from "../Modals/LoginModal";
+import {logout} from "../../store/ducks/currentUser";
+import {setModal} from "../../store/ducks/modal";
 
 type Props = {
     setModal: SetModal

src/pages/Novel/Novel.tsx

@@ -13,10 +13,10 @@ import {
 } from "../../api/novels";
 import {Link} from "react-router-dom";
 import Loading from "../../ui/Loading";
-import {TranslateExitStatus, TranslatePlatform, TranslateStatus} from "../../api/api";
+import {TranslateExitStatus, TranslateStatus} from "../../api/api";
 import Comments from "../Comments/Comments";
-import {hideModal, setModal} from "../../store/actions";
 import LoadingModal from "../Modals/LoadingModal";
+import {hideModal, setModal} from "../../store/ducks/modal";
 
 type Props = {
     currentUser: UserType

src/pages/User/Settings/Appearance.tsx

@@ -2,13 +2,18 @@ import Button from "../../../ui/Button/Button";
 import Group from "../../../ui/Group/Group";
 import React, {FormEvent} from "react";
 import {fetchUserSettings, updateUserAppearanceSettings} from "../../../api/users";
-import {setUser} from "../../../store/actions";
+import {connect} from "react-redux";
+import {setUser} from "../../../store/ducks/currentUser";
+
+type Props = {
+    setUser: SetUser
+}
 
 type State = {
     theme: Theme
 }
 
-class Appearance extends React.Component<{}, State> {
+class Appearance extends React.Component<Props, State> {
     state: State = {
         theme: 'dark'
     }
@@ -23,6 +28,8 @@ class Appearance extends React.Component<{}, State> {
         event.preventDefault();
 
         const { theme } = this.state;
+        const { setUser } = this.props;
+
         updateUserAppearanceSettings(theme).then(user => {
             setUser(user);
 
@@ -52,4 +59,8 @@ class Appearance extends React.Component<{}, State> {
     }
 }
 
-export default Appearance;
+export default connect(null,
+    dispatch => ({
+        setUser: (user: UserType) => dispatch(setUser(user))
+    })
+)(Appearance);

src/pages/User/Settings/Settings.tsx

@@ -3,12 +3,12 @@ import Group from "../../../ui/Group/Group";
 import {connect} from "react-redux";
 import NotFoundError from "../../NotFoundError";
 import './Settings.sass';
-import {setUser} from "../../../store/actions";
 import Tabs from "../../../ui/Tabs/Tabs";
 import TabItem from "../../../ui/Tabs/TabItem";
 import Appearance from "./Appearance";
 import General from "./General";
 import Security from "./Security";
+import {setUser} from "../../../store/ducks/currentUser";
 
 enum TabsNames {
     General,
@@ -32,7 +32,7 @@ class Settings extends React.Component<Props, State> {
     }
 
     render() {
-        const { currentUser, match: { params: { userId } } } = this.props;
+        const { currentUser, match: { params: { userId } }, setUser } = this.props;
         const { currentTab } = this.state
 
         if(parseInt(userId) !== currentUser.id) return <NotFoundError/>;

src/pages/User/User.tsx

@@ -7,8 +7,8 @@ import Loading from "../../ui/Loading";
 import NovelItem from "../../ui/NovelItem/NovelItem";
 import {connect} from "react-redux";
 import Button from "../../ui/Button/Button";
-import {addNotification} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
+import {addNotification} from "../../store/ducks/notifications";
 
 type Props = {
     match: { params: { userId: string } }
@@ -69,8 +69,7 @@ class User extends React.Component<Props, State> {
                 </NotificationMessage>
             );
             this.props.addNotification(notification);
-
+        });
-        })
     }
 
     render() {

src/store/actionTypes.ts

@@ -1,9 +0,0 @@
-enum ActionTypes {
-    SET_USER = 'SET_USER',
-    LOGOUT = 'LOGOUT',
-    ADD_NOTIFICATION = 'ADD_NOTIFICATION',
-    SET_MODAL = 'SET_MODAL',
-    HIDE_MODAL = 'HIDE_MODAL'
-}
-
-export default ActionTypes;

src/store/actions.ts

@@ -1,27 +0,0 @@
-import ActionTypes from "./actionTypes";
-import React from "react";
-
-const setUser = (userData: UserType) => ({
-    type: ActionTypes.SET_USER,
-    userData
-});
-const logout = () => ({
-    type: ActionTypes.LOGOUT
-});
-
-const addNotification = (notification: React.ReactNode) => ({
-    type: ActionTypes.ADD_NOTIFICATION,
-    notification
-});
-
-const setModal = (modal: React.ReactNode | null) => ({
-    type: ActionTypes.SET_MODAL,
-    modal
-});
-const hideModal = () => ({
-    type: ActionTypes.HIDE_MODAL
-})
-
-export { setUser, logout,
-         addNotification,
-         setModal, hideModal };

src/store/ducks/currentUser.ts

@@ -1,23 +1,22 @@
-import ActionTypes from "../actionTypes";
+const SET_USER = 'unmei/currentUser/SET_USER';
+const LOGOUT = 'unmei/currentUser/LOGOUT';
 
 const initialState = {
     authorized: false
 };
-
 type Action = {
     type: string
     userData: UserType
-}
+};
-
+const reducer = (state = initialState, action: Action) => {
-export default (state = initialState, action: Action) => {
     switch (action.type) {
-        case ActionTypes.SET_USER:
+        case SET_USER:
             if(action.userData) {
                 state = Object.assign({}, state, action.userData);
                 state.authorized = true;
             }
             return state;
-        case ActionTypes.LOGOUT:
+        case LOGOUT:
             state = {
                 authorized: false
             };
@@ -25,4 +24,15 @@ export default (state = initialState, action: Action) => {
         default:
             return state
     }
-}
+}
+
+const setUser = (userData: UserType) => ({
+    type: SET_USER,
+    userData
+});
+const logout = () => ({
+    type: LOGOUT
+});
+
+export default reducer;
+export { setUser, logout }

src/store/ducks/index.ts

@@ -0,0 +1,6 @@
+import {combineReducers} from "redux";
+import currentUser from './currentUser'
+import modal from "./modal";
+import notifications from './notifications'
+
+export default combineReducers({ currentUser, modal, notifications })

src/store/ducks/modal.ts

@@ -0,0 +1,36 @@
+import React from "react";
+
+// Actions
+const SET_MODAL = 'unmei/modal/SET_MODAL';
+const HIDE_MODAL = 'unmei/modal/HIDE_MODAL';
+
+// Reducer
+const initialState: React.ReactNode | null = null;
+type Action = {
+    type: string
+    modal: React.ReactNode | null
+}
+const reducer = (state=initialState, action: Action) => {
+    switch (action.type) {
+        case SET_MODAL: {
+            return action.modal;
+        }
+        case HIDE_MODAL: {
+            return null;
+        }
+        default: return state;
+    }
+}
+
+// Action creators
+const setModal = (modal: React.ReactNode | null) => ({
+    type: SET_MODAL,
+    modal
+});
+
+const hideModal = () => ({
+    type: HIDE_MODAL
+});
+
+export default reducer;
+export { setModal, hideModal }

src/store/ducks/notifications.ts

@@ -1,20 +1,30 @@
 import React from "react";
-import ActionTypes from "../actionTypes";
 
+// Actions
+const ADD_NOTIFICATION = 'unmei/notifications/ADD_NOTIFICATION';
+
+// Reducer
 const initialState: React.ReactNode[] = [];
-
 type Action = {
     type: string
     notification: React.ReactNode
-}
+};
-
+const reducer = (state = initialState, action: Action) => {
-export default (state = initialState, action: Action) => {
     switch (action.type) {
-        case ActionTypes.ADD_NOTIFICATION: {
+        case ADD_NOTIFICATION: {
             if(state.length === 3)
                 return [...state.slice(1), action.notification];
             return [...state, action.notification];
         }
         default: return state;
     }
-}
+}
+
+// Actions creator
+const addNotification = (notification: React.ReactNode) => ({
+    type: ADD_NOTIFICATION,
+    notification
+});
+
+export default reducer;
+export { addNotification };

src/store/reducers/modal.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import ActionTypes from "../actionTypes";
-
-const initialState: React.ReactNode | null = null;
-
-type Action = {
-    type: string
-    modal: React.ReactNode | null
-}
-
-export default (state=initialState, action: Action) => {
-    switch (action.type) {
-        case ActionTypes.SET_MODAL: {
-            return action.modal;
-        }
-        case ActionTypes.HIDE_MODAL: {
-            return null;
-        }
-        default: return state;
-    }
-}

src/store/reducers/reducers.ts

@@ -1,6 +0,0 @@
-import {combineReducers} from "redux";
-import currentUser from "./currentUser";
-import notifications from "./notifications";
-import modal from "./modal";
-
-export default combineReducers({ currentUser, notifications, modal })

src/store/store.ts

@@ -1,6 +1,6 @@
 import {createStore} from "redux";
 import {composeWithDevTools} from "redux-devtools-extension";
-import reducers from "./reducers/reducers";
+import reducers from "./ducks/index";
 
 const composeEnhancers = composeWithDevTools({
     trace: true

src/ui/ConfirmPopout/ConfirmPopout.tsx

@@ -3,7 +3,7 @@ import Button from "../Button/Button";
 import './ConfirmPopout.sass'
 import '../Modal/Modal.sass';
 import {connect} from "react-redux";
-import {hideModal} from "../../store/actions";
+import {hideModal} from "../../store/ducks/modal";
 
 type Props = {
     hideModal: () => void
@@ -50,4 +50,4 @@ export default connect(null,
     dispatch => ({
         hideModal: () => dispatch(hideModal())
     })
-)(ConfirmPopout);
+)(ConfirmPopout);

src/ui/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import './Modal.sass'
 import {connect} from "react-redux";
-import {setModal} from "../../store/actions";
+import {setModal} from "../../store/ducks/modal";
 
 type Props = {
     setModal: (modal: React.ReactNode | null) => void