trying to hook up my own store about react-redux-grid HOT 23 CLOSED

You're so close! Since Reducers is an object with key value pairs, we need to use the spread operator to extend that object with your own custom reducers.

If you ever have a question about object.assign, destructuring, or the spread operator you can use the babel repl to see what's actually happening.

import { Reducers } from 'react-redux-grid';

const reducer = combineReducers({
    ...Reducers,
    menu,
    auth,
    routing: routerReducer,
    form: formReducer
});

import { store } from 'path/to/my/store.js';

const grid =  (props}) => (
     <Grid { ...props }  { ...{ store } } />
);

export default grid;

from react-redux-grid.

Wow, I was close :)
That worked great. Thank you. Now however, the data that I have in my
const gridData = {
columns,
plugins,
data
};
does not show up. Again when I use the default store it shows up but when using my store it does not.
Any thoughts ?
Thanks again

from react-redux-grid.

Without the whole instantiation it's hard to know. But the gridData object should have the store, the data, and the columns. There's no store in that gridData object.

from react-redux-grid.

Ah! That's probably it, I'll have to try it tonight. Thank you
R
On Apr 23, 2016 12:28 PM, "Benjamin Cripps" [email protected]
wrote:

Without the whole instantiation it's hard to know. But the gridData
object should have the store, the data, and the columns. There's no store
in that gridData object.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#9 (comment)

from react-redux-grid.

Hi, so I added the store explicitly to gridData and no change, let me post what I have

const data = [
{
    name: 'Michael Jordan',
    position: 'Shooting Guard'
},
{
    name: 'Charles Barkley',
    position: 'Power Forward'
}];

const columns = [
{
    name: 'Name',
    dataIndex: 'name',
    width: '10%',
    className: 'additional-class',
    renderer: CellLink
},
{
    name: 'Position',
    dataIndex: 'position',
    width: '35%',
    className: 'additional-class',
    renderer: EmailLink
}
];

const gridData = {
columns,
plugins,
data
};

const grid =  (props, {store}) => {
    gridData.store = store;
     return (<Grid { ...gridData } />)
};


grid.contextTypes = {
    store: React.PropTypes.object
};

export default grid;

I've inspected the the "store" and it has all the reducers in it. They all show 1 entry, an array of two items, generally something like this
0:"gridState"
1:undefined

from react-redux-grid.

What is in the dataSource reducer?

Do you have console errors?

from react-redux-grid.

Hi,
The only error in the console is
GET http://localhost:8080/content/images/clear-search.png 404 (Not Found)

which I believe is some mess of mine in the css.
The dataSource reducer ( as seen in the DevTools middleware thing ) shows

DataSource:
() 1 entry
gridData:undefined

I'm passing in an object called gridData. But I don't know why that name would be showing up. So I tried to change the name of the prop in there from "data" to "gridData" but I got an error about a DataSource or static data set. I don't get that when it's named data.

from react-redux-grid.

ok, my bad, not too familiar with that tool, I guess it scrolls up a bunch of state changes. The last one has a bunch of data under DataSource. Not showing up, but it's there. perhaps there's a css error I've created.
If anything comes to mind let me know otherwise I'll investigate along those lines tomorrow.
Thanks again,

r

from react-redux-grid.

It sounds like your renderers aren't functioning correctly. Could you paste them here? First, try not using a renderer, if the data shows up, that's the issue.

from react-redux-grid.

I don't actually have any components that inherit from Component, so I don't actually call render anywhere. I call

ReactDOM.render(
<Provider store={store}>
    <div>
        <Router history={history}>
            {routes}
        </Router>
        <DevTools />
    </div>
</Provider>,
document.getElementById('root')
);

in my root but all my components are anonymous and called by a container, that is called with connect.
I may be misunderstanding what you are asking though.
Thanks,
R

from react-redux-grid.

You are declaring renderers on your column definitions. EmailLink, and CellLink. Looks like they might be the issue.

from react-redux-grid.

Ah I did missunderstand.
so I did have two custom renders, I removed them both and still no dice. I even replaced them with the following and same result.

renderer: function(x){
        return x;
    }

I only have the two columns like I posted above. I am sort of on baby duty right now and can't do must investigation, but I'll look some more this evening.
Thanks again,
r

from react-redux-grid.

Hi,
A little digging and I found the following
in Grid.jsx
const columns = columnState && columnState.columns ? columnState.columns : [];
in the destructuring from this.props there is both columns and columnState. columns in fact has my columns in it. However, columnState is null. So I end up with null for columns. So I removed that line and my columns showed up. However, my data did not show up.
So a bit more digging and I found in Grid.jsx there is the line
const rowProps = { columnManager, columns, events, pageSize, plugins, reducerKeys, selectionModel, store };

This is then passed to . However in Row there is the call
const rows = getRowSelection(dataSource, pageIndex, pageSize, pager, plugins, store);
the values passed come from the destructuring of this.props.
However, dataSource does not exist in what is passed to Row.
This seems like a pretty fundamental error. It seems like nothing would work. So I suspect that it is a symptom of something else I'm missing. But I'm not sure what.
Please let me know what you think.
Thanks
Raif

from react-redux-grid.

Are you sure you have all the reducers registered to your store? It sure sounds like your missing the grid reducer. You will need all of these reducers:

export const Reducers = {
    BulkActions: bulkaction,
    DataSource: dataSource,
    Editor: editor,
    ErrorHandler: errorhandler,
    Filter: filter,
    Grid: grid,
    Loader: loader,
    Menu: menu,
    Pager: pager,
    Selection: selection
};

When you inspect your console for what reducers are available, do you see the grid reducer? That's where the columns are stored.

from react-redux-grid.

Yes I definitely have all the reducers, and I can inspect the grid reducer
and see the columns.
So yea it seems like somehow the actions are not called before the store is
used.
Can you think of what I should inspect next?
R
On Apr 27, 2016 5:54 PM, "Benjamin Cripps" [email protected] wrote:

Are you sure you have all the reducers registered to your store? It sure
sounds like your missing the grid reducer. You will need all of these
reducers:

export const Reducers = {
BulkActions: bulkaction,
DataSource: dataSource,
Editor: editor,
ErrorHandler: errorhandler,
Filter: filter,
Grid: grid,
Loader: loader,
Menu: menu,
Pager: pager,
Selection: selection
};

When you inspect your console for what reducers are available, do you see
the grid reducer? That's where the columns are stored.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#9 (comment)

from react-redux-grid.

Can you attach your files so I can debug and see what the issue is?

On Apr 27, 2016, at 5:40 PM, Raif Harik [email protected] wrote:

Yes I definitely have all the reducers, and I can inspect the grid reducer
and see the columns.
So yea it seems like somehow the actions are not called before the store is
used.
Can you think of what I should inspect next?
R
On Apr 27, 2016 5:54 PM, "Benjamin Cripps" [email protected] wrote:

Are you sure you have all the reducers registered to your store? It sure
sounds like your missing the grid reducer. You will need all of these
reducers:

export const Reducers = {
BulkActions: bulkaction,
DataSource: dataSource,
Editor: editor,
ErrorHandler: errorhandler,
Filter: filter,
Grid: grid,
Loader: loader,
Menu: menu,
Pager: pager,
Selection: selection
};

When you inspect your console for what reducers are available, do you see
the grid reducer? That's where the columns are stored.

―
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#9 (comment)
―
You are receiving this because you commented.
Reply to this email directly or view it on GitHub

from react-redux-grid.

Hi, well, I've got it in the middle of my app, which isn't all that big but it would be pretty difficult to isolate it. here is the github repo. You should be able to clone. npm install npm start and it'll run on the built in server.
You will see a menu on the left the top entry is trainers and if you click on that you'll be off to the races, so to speak.
The file in question is in src/components/TrainerList.js
https://github.com/reharik/MF_FrontEnd
yes I came up with that all on my own. FrontEnd.

Thanks,
Raif

from react-redux-grid.

Awesome, I'll have some time tomorrow to debug and I'll let you know what I find.

from react-redux-grid.

Great. Thx, I'll post what I find if anything.
So comparing the use of built in store vs my store, I find that in both the
grid loads once and fires all the actions. However with your store it
fires again this time with the data from the actions. With my store it
never fires again.
And by fire, I have a break point in the render, so I guess I mean render.
So it seems that after the actions fire it changes the state of the store
but does not re-render the grid.
Thx
R
On Apr 29, 2016 9:32 AM, "Benjamin Cripps" [email protected] wrote:

Awesome, I'll have some time tomorrow to debug and I'll let you know what I
find.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#9 (comment)

from react-redux-grid.

Hey, I think it boils down to this. The state is changing but the elements are not re-rendering. This happens when the state is directly mutated. I highly suspect that is not what is happening with your code. In fact I believe you are using immutable.js.
which brings to mind something else. I remember, when I was considering using immutable.js that there is some degree of configuration you must do to get it to work with react or redux. As I am not using it, I am no doing that config, and I wonder if this might be the problem?

r

from react-redux-grid.

Ok i've got a fix -- and the issue is with the grid. It expects the casing of the reducers to be camel cased -- I've modified the central component that reads state to be case insensitive.

I've pushed the fix, and added tests around this issue so it won't happen again!

from react-redux-grid.

Awesome. Thank you. I just copied the changes, I don't know if it's up on npm yet. I assume it will be next time I need to download.
Thanks for you help with this.
R

from react-redux-grid.

I will create a new release, this is change that all installers should have.

from react-redux-grid.