use in react functional components

[anandabayuf]

I want to know how to use this redux-micro-frontend on react functional component. I tried changing the todoList.js file (sample/todoApp/todoList.js) from a class component to a functional component, but kept having problems. I think this is from within the constructor. is there any solution?

code before (class components):

export class TodoList extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			todos: [],
			globalCounter: 0,
		};

		this.addTodo = this.addTodo.bind(this);
		this.removeTodo = this.removeTodo.bind(this);
		this.counterChanged = this.counterChanged.bind(this);
		this.stateChanged = this.stateChanged.bind(this);

		this.globalStore = GlobalStore.Get();
		this.store = createStore(todoSlice);
		this.globalStore.RegisterStore('TodoApp', this.store, [
			GlobalStore.AllowAll,
		]);

		try {
			this.globalStore.SubscribeToPartnerState(
				'TodoApp',
				'CounterApp',
				this.counterChanged
			);
		} catch (error) {
			//Since
		}
		this.globalStore.Subscribe('TodoApp', this.stateChanged);
	}

	addTodo(description) {
		this.globalStore.DispatchAction('TodoApp', ADD_TODO(description));
	}

	removeTodo(todoId) {
		this.globalStore.DispatchAction('TodoApp', REMOVE_TODO(todoId));
	}

	counterChanged(counterState) {
		this.setState({
			globalCounter: counterState.global,
		});
	}

	stateChanged(todoState) {
		this.setState({
			todos: todoState,
		});
	}

	render() {
		return (
			<div>
				<AddTodoComponent addTodo={this.addTodo}></AddTodoComponent>
				<h2>Todos</h2>
				<ul>
					{this.state.todos.map((todo) => {
						return (
							<li>
								<Todo
									id={todo.id}
									description={todo.description}
									removeTodo={this.removeTodo}
								/>
							</li>
						);
					})}
				</ul>
				<div>Global Counter: {this.state.globalCounter}</div>
			</div>
		);
	}
}

code after (functional component):

export const TodoList = () => {
	const [state, setState] = React.useState({
		todos: [],
		globalCounter: 0,
	});

	const globalStore = GlobalStore.Get();
	const store = createStore(todoSlice);
	globalStore.RegisterStore('TodoApp', store, [GlobalStore.AllowAll]);

	const counterChanged = (counterState) => {
		setState({
			globalCounter: counterState.global,
		});
	};

	try {
		globalStore.SubscribeToPartnerState(
			'TodoApp',
			'CounterApp',
			counterChanged
		);
	} catch (error) {
		//Since
	}

	const stateChanged = (todoState) => {
		setState({
			todos: todoState,
		});
	};

	globalStore.Subscribe('TodoApp', stateChanged);

	const addTodo = (description) => {
		globalStore.DispatchAction('TodoApp', ADD_TODO(description));
	};

	const removeTodo = (todoId) => {
		globalStore.DispatchAction('TodoApp', REMOVE_TODO(todoId));
	};

	return (
		<div>
			<AddTodoComponent addTodo={addTodo}></AddTodoComponent>
			<h2>Todos</h2>
			<ul>
				{state.todos.map((todo) => {
					return (
						<li>
							<Todo
								id={todo.id}
								description={todo.description}
								removeTodo={removeTodo}
							/>
						</li>
					);
				})}
			</ul>
			<div>Global Counter: {state.globalCounter}</div>
		</div>
	);
};