# Using redux with FuseJS

**URL:** <https://forums.fusetools.com/t/using-redux-with-fusejs/7085>\
**Category:** Show and Tell\
**Created:** [April 23, 2018, 6:15pm UTC](https://forums.fusetools.com/t/using-redux-with-fusejs/7085 "2018-04-23T18:15:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [April 23, 2018, 6:15pm UTC](https://forums.fusetools.com/t/using-redux-with-fusejs/7085/1 "2018-04-23T18:15:32Z")

</div>

Most of the users know hot to use redux, when it’s good, and when it’s not.  
FuseJS provides us with observables, which are extremely good for any state management.

But I prefer to have predictable and immutable global state, and redux can solve this problem.

So, first of all, let’s create a new project and add redux package from npm.

```auto
        npm init .
        npm install redux --save

```

Now, let’s get into store configuration:

```auto
store.js

```

```auto
import {
  createStore,
  combineReducers
} from "node_modules/redux/dist/redux.js";

// our dumb reducer
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}
//use combineReducers to make sure, we support this redux feature
const reducers = combineReducers({
  counter: counter
});
//export our store, so that we able to get it inside other components
export const store = createStore(reducers);

```

Now, let’s create a basic redux-connected class, so that we can reuse it in our components:

```auto
import {store} from '../store';

export default class ReduxComponent {
    constructor(mapStateToProps) {
        // this is the function, which will take state and give us actual props
        this.mapStateToProps = mapStateToProps;
        // with this, in other classes we can just call this.dispatch to emit action
        this.dispatch = store.dispatch.bind(store);
        // get initial props
        this.updateProps(store.getState());
        // subscribe to store changes
        store.subscribe(()=>{
            this.updateProps(store.getState());
        })
    }
    // this will make props field immutable
    updateProps(state) {
        this.props = Object.assign({},this.props, this.mapStateToProps(state));
    }
}

```

Now, let’s create our actual model

```auto
import ReduxComponent from 'fuse-redux/ReduxComponent';

export default class TodoApp extends ReduxComponent {
  // this is function we gonna use to map state to props
  static mapStateToValues(state) {
    return {
      counter: state.counter,
    };
  }
  constructor() {
    super(TodoApp.mapStateToValues);
  }

  increment(title) {
    this.dispatch({ type: "INCREMENT" });
  }
  decrement(title) {
    this.dispatch({ type: "DECREMENT" });
  }
}

```

And here we go, let’s create our first redux-connected UX Component:

```auto
<App Model="TodoApp">
  <Panel>
    <StackPanel>
      <Text Value="{props.counter}"/>
      <Button Clicked="{increment}">
        <Text Value="Increment" />
      </Button>
      <Button Clicked="{decrement}">
        <Text Value="Decrement" />
      </Button>
    </StackPanel>
	</Panel>
</App>

```

There is also a way to use redux-logger and `possibly` redux-dev-tool.