Redux store is not a singleton anymore (-> bug fixes)

app/controllers/posts_controller.rb

@@ -61,8 +61,9 @@ class PostsController < ApplicationController
       defaults = { board_id: Board.first.id }
 
       params
-        .permit(:board_id, :post_status_id)
+        .permit(:board_id, :post_status_id, :page, :search)
         .with_defaults(defaults)
+        .except(:page, :search)
     end
     
     def post_params

app/javascript/components/Board/BoardP.tsx

@@ -71,6 +71,7 @@ class BoardP extends React.Component<Props> {
       handleSearchFilterChange,
       handlePostStatusFilterChange,
     } = this.props;
+    const { filters } = posts;
 
     return (
       <div className="boardContainer">
@@ -81,7 +82,7 @@ class BoardP extends React.Component<Props> {
             authenticityToken={authenticityToken}
           />
           <SearchFilter
-            searchQuery={posts.filters.searchQuery}
+            searchQuery={filters.searchQuery}
             handleChange={handleSearchFilterChange}
           />
           <PostStatusFilter
@@ -89,7 +90,7 @@ class BoardP extends React.Component<Props> {
             areLoading={postStatuses.areLoading}
             error={postStatuses.error}
 
-            currentFilter={posts.filters.postStatusId}
+            currentFilter={filters.postStatusId}
             handleFilterClick={handlePostStatusFilterChange}
           />
         </div>
@@ -102,7 +103,9 @@ class BoardP extends React.Component<Props> {
           areLoading={posts.areLoading}
           error={posts.error}
 
-          handleLoadMore={() => posts.areLoading ? null : requestPosts(board.id, posts.page + 1)}
+          handleLoadMore={() =>
+            requestPosts(board.id, posts.page + 1, filters.searchQuery, filters.postStatusId)
+          }
         />
       </div>
     );

app/javascript/components/Board/index.tsx

@@ -1,20 +1,41 @@
 import * as React from 'react';
 import { Provider } from 'react-redux';
 
-import store from '../../stores';
-
 import Board from '../../containers/Board';
+import createStoreHelper from '../../helpers/createStore';
 
 import '../../stylesheets/components/Board.scss';
 
-const BoardRoot = ({ board, isLoggedIn, authenticityToken }) => (
-  <Provider store={store}>
-    <Board
-      board={board}
-      isLoggedIn={isLoggedIn}
-      authenticityToken={authenticityToken}
-    />
-  </Provider>
-);
+import IBoard from '../../interfaces/IBoard';
+
+interface Props {
+  board: IBoard;
+  isLoggedIn: boolean;
+  authenticityToken: string;
+}
+
+class BoardRoot extends React.Component<Props> {
+  store: any;
+
+  constructor(props) {
+    super(props);
+
+    this.store = createStoreHelper();
+  }
+
+  render() {
+    const { board, isLoggedIn, authenticityToken } = this.props;
+
+    return (
+      <Provider store={this.store}>
+        <Board
+          board={board}
+          isLoggedIn={isLoggedIn}
+          authenticityToken={authenticityToken}
+        />
+      </Provider>
+    );
+  }
+}
 
 export default BoardRoot;

app/javascript/components/Post/index.tsx

@@ -1,23 +1,53 @@
 import * as React from 'react';
 import { Provider } from 'react-redux';
 
-import store from '../../stores';
+import createStoreHelper from '../../helpers/createStore';
 
 import Post from '../../containers/Post';
 
+import IPostStatus from '../../interfaces/IPostStatus';
+
 import '../../stylesheets/components/Post.scss';
 
-const PostRoot = ({ postId, postStatuses, isLoggedIn, isPowerUser, authenticityToken }) => (
-  <Provider store={store}>
-    <Post
-      postId={postId}
-      postStatuses={postStatuses}
+interface Props {
+  postId: number;
+  postStatuses: Array<IPostStatus>;
+  isLoggedIn: boolean;
+  isPowerUser: boolean;
+  authenticityToken: string;
+}
 
-      isLoggedIn={isLoggedIn}
-      isPowerUser={isPowerUser}
-      authenticityToken={authenticityToken}
-    />
-  </Provider>
-);
+class PostRoot extends React.Component<Props> {
+  store: any;
+
+  constructor(props) {
+    super(props);
+
+    this.store = createStoreHelper();
+  }
+
+  render() {
+    const {
+      postId,
+      postStatuses,
+      isLoggedIn,
+      isPowerUser,
+      authenticityToken
+    } = this.props;
+
+    return (
+      <Provider store={this.store}>
+        <Post
+          postId={postId}
+          postStatuses={postStatuses}
+
+          isLoggedIn={isLoggedIn}
+          isPowerUser={isPowerUser}
+          authenticityToken={authenticityToken}
+        />
+      </Provider>
+    );
+  }
+}
 
 export default PostRoot;

app/javascript/containers/Board.tsx

@@ -17,7 +17,7 @@ const mapStateToProps = (state: State) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  requestPosts(boardId: number, page: number = 1, searchQuery: string = '', postStatusId: number) {
+  requestPosts(boardId: number, page: number = 1, searchQuery: string = '', postStatusId: number = null) {
     dispatch(requestPosts(boardId, page, searchQuery, postStatusId));
   },
 

app/javascript/helpers/createStore.ts

@@ -0,0 +1,15 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+
+import rootReducer from '../reducers/rootReducer';
+
+const createStoreHelper = () => (
+  createStore(
+    rootReducer,
+    applyMiddleware(
+      thunkMiddleware,
+    ),
+  )
+);
+
+export default createStoreHelper;

app/javascript/stores/index.ts

@@ -1,15 +0,0 @@
-import { createStore, applyMiddleware } from 'redux';
-import thunkMiddleware from 'redux-thunk';
-
-import rootReducer from '../reducers/rootReducer';
-
-const store = createStore(
-  rootReducer,
-  applyMiddleware(
-    thunkMiddleware,
-  ),
-);
-
-store.subscribe(() => console.log(store.getState()));
-
-export default store;